parabeac_core이 연속적인 Figma에서 Flutter 생성기로 발전함에 따라 스타일링에 대한 보다 강력한 지원을 추가하고 싶었습니다. 최신 릴리스(parabeac_core v2.5)에서는 정확히 그렇게 했습니다. 우리가 추가한 지원 중 일부는 다음과 같습니다.

Complex Fill Support

혼합 단색

이미지

선형 그라디언트

Rectangle and Text Drop Shadow Support

Border Support

테두리 반경

테두리 두께

테두리 색상

Image Vectors map to SVG

이 중 일부가 어떻게 작동하는지 살펴보겠습니다!

이 중 하나를 테스트하려면 이 Figma 파일을 자유롭게 복사하십시오: https://www.figma.com/file/25pZ3AFZH0rGBwOMoB7l1W/parabeac_core-v2.5-Styling-Tests?node-id=0%3A1

복잡한 채우기 지원

혼합 색상

초등학교 때 선생님이 두 가지 색을 섞어 새로운 색을 만들라고 했던 것을 기억하십니까? 이것이 바로 우리가 Figma에서 지원을 추가한 것입니다. 파란색과 빨간색을 혼합하면 이제 Flutter에서 자홍색이 됩니다.

Container(
    width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x70991d66),
  ),
),

이미지 채우기

이 믹스에 이미지를 추가하고 싶다고 가정해 보겠습니다. 좋은 소식! 우리는 이 채우기를 녹색 채우기가 혼합된 이미지로 변환하여 쉽게 만들 수 있으므로 당신을 응시하는 바위를 절대 놓치지 않을 것입니다 ;)

Image.asset(
  'assets/images/imagewithtint.png',
  package: 'foo',
  width: 197.000,
  height: 120.000,
  fit: BoxFit.none,
),

그라데이션 채우기

Gradients에 대한 지원을 처음으로 추가하여 Linear Gradient를 사용할 수 있으며 코드를 직접 변환합니다. 다이아몬드 및 방사형 그라디언트는 아직 직접 지원되지 않지만 출력이 여전히 정확하도록 이미지를 생성합니다.

선형 그라데이션:

Container(
  width: 197.000,
  height: 124.000,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment(1.0000000596046466, -0.999999849557967),
      end: Alignment(-1.0, 1.0000002100466796),
      colors: <Color>[
        Color(0xffff0000),
        Color(0x00c4c4c4),
      ],
      stops: [
        0.0,
        1.0,
      ],
      tileMode: TileMode.clamp,
    ),
  ),
),

방사형/다이아몬드 그라디언트는 현재 이미지로 변환됩니다.

직사각형 및 텍스트 그림자 효과 지원

이제 Figma에서 Rectangles 및 Text에 그림자를 추가하여 코드에 직접 출력합니다. 아래를 참조하세요.

(텍스트)

AutoSizeText(
  'Howdy',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 12.0,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.0,
    color: Colors.black,
    shadows: [
      Shadow(
        color: Color(0xe5000000),
        offset: Offset(0.0, 4.0),
        blurRadius: 4.0,
      ),
    ],
  ),
  textAlign: TextAlign.left,
)),

(직사각형)

Container(
  width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x99378c59),
    border: Border.all(
      color: Color(0xff0085ff),
      width: 3.0,
    ),
    boxShadow: [
      BoxShadow(
        color: Color(0x40000000),
        spreadRadius: 4.0,
        blurRadius: 4.0,
        offset: Offset(-5.0, 4.0),
      ),
    ],
  ),
),

국경 지원

이전에는 테두리 지원이 제한적이었지만 이제 테두리 색상, 테두리 반경 및 테두리 두께를 지원합니다. 작동 방식은 다음과 같습니다.

Container(
  width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x99378c59),
    borderRadius: BorderRadius.all(Radius.circular(5.0)),
    border: Border.all(
      color: Color(0xff0085ff),
      width: 3.0,
    ),
  ),
),

이미지 벡터를 SVG로 매핑

마지막으로 이전에 복잡한 모양은 이미지로 변환되지만 이러한 이미지의 크기를 조정하면 품질이 낮은 이미지가 되는 경향이 있습니다. 최신 업데이트를 통해 이제 SVG로 변환 및 사용되므로 완벽한 픽셀 크기 조정이 가능합니다!





이 글을 읽고 있다면 확인해 주셔서 감사합니다! 여러분의 생각과 피드백을 듣고 싶습니다. Discord에서 커뮤니티에 가입하거나 [email protected]으로 이메일을 보내 지원을 요청하세요 😎