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:

Complex Fill Support

• Mixed Solid Color
• Image
• Linear Gradients

Rectangle + Text Drop Shadow Support

Complex Borders

• Border Radius
• Border Thickness
• Border Color

Image Vectors map to SVG

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.

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

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.asset(
  'assets/images/imagewithtint.png',
  package: 'foo',
  width: 197.000,
  height: 120.000,
  fit: BoxFit.none,
),

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:

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,
    ),
  ),
),

Radial/Diamond Gradients get converted to images for now.

Rectangle + 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)

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,
)),

(Rectangle)

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),
      ),
    ],
  ),
),

Border Support

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

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,
    ),
  ),
),

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!

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 (https://discord.com/invite/qUrghes) or email us for support at support@parabeac.com😎