DEV Community

Cover image for Figma + Flutter Complex Fills, Drop Shadows, SVGs and Borders - parabeac_core v2.5
Ivan Huerta for Parabeac

Posted on • Updated on

Figma + Flutter Complex Fills, Drop Shadows, SVGs and Borders - parabeac_core v2.5

As parabeac_core matures as a continuous Figma to Flutter generator, we wanted to add more robust support for styling. In the latest release (parabeac_core v2.5) we did exactly that. Some of the support we added were:

Let’s walk through how some of this works!

If you’d like to test any of this out, feel free to duplicate this Figma file: https://www.figma.com/file/25pZ3AFZH0rGBwOMoB7l1W/parabeac_core-v2.5-Styling-Tests?node-id=0%3A1

Complex Fill Support

Mixed Color

Remember in grade school when the teacher asked you to mix 2 colors to make a new color? Well that’s exactly what we added support for in Figma. If you mix blue & red, you now get a magenta color in Flutter.

Mixed Color Support

Container(
    width: 197.000,
  height: 120.000,
  decoration: BoxDecoration(
    color: Color(0x70991d66),
  ),
),
Enter fullscreen mode Exit fullscreen mode

Image Fill

Say you wanted to add an image to this mix. Good news! We make this easy by converting this fill into an image with a mixed green fill, so you’ll never have to miss out on the rock staring at you ;)

Image Fill Support

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

Gradient Fill

For the first time we’re adding support for Gradients, you can use Linear Gradient and we’ll convert the code directly. Diamond and Radial gradients are not supported directly yet but we do generate an image for them so that the output is still correct.

Linear Gradient:

Linear Gradient Support

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,
    ),
  ),
),
Enter fullscreen mode Exit fullscreen mode

Radial/Diamond Gradients get converted to images for now.

Radial/Diamond Gradient Support

Rectangle and Text Drop Shadow Support

Now by adding a drop shadow in Figma to Rectangles and Text, we print that out directly to the code, see below:

(Text)

Text Drop Shadow

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,
)),
Enter fullscreen mode Exit fullscreen mode

(Rectangle)

Rectangle Drop Shadow

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),
      ),
    ],
  ),
),
Enter fullscreen mode Exit fullscreen mode

Border Support

Previously, our border support was limited, but we now support border color, border radius, and border thickness. Here’s how it works:

Border Support

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,
    ),
  ),
),
Enter fullscreen mode Exit fullscreen mode

Image Vectors Map To SVG

Lastly, previously complex shapes convert to images, but when scaling these images, they tend to be low quality images. With our latest update, these are now turned into & used as SVGs so that you have pixel-perfect scaling!

SVG Figma

SVG Flutter

If you’re reading this, thanks for checking this out! We’d love to hear your thoughts & feedback. Be sure to join our community on Discord or email us for support at support@parabeac.com😎

Discussion (0)