Figma + Flutter Complex Fills, Drop Shadows, SVGs and Borders - parabeac_core v2.5
Tags: flutter, figma, design, frontend
Published: 2022-03-23 15:02:18

As [parabeac_core](https://github.com/Parabeac/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](#complex-fill-support)
    - Mixed Solid Color
    - Image
    - Linear Gradients
- [Rectangle and Text Drop Shadow Support](#rectangle-and-text-drop-shadow-support)
- [Border Support](#border-support)
    - Border Radius
    - Border Thickness
    - Border Color
- [Image Vectors map to SVG](#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](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jumldv5d3ru362s822v4.png)

```dart
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 Fill Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oia47szmst62vrqi3dme.png)

```dart
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:

![Linear Gradient Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/727g766grg73qvvinywm.png)

```dart
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.*

![Radial/Diamond Gradient Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vi4bapz962zb6ftk7d9.png)

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqabp7obrhke6ujutivq.png)

```dart
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)

![Rectangle Drop Shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1al05ca4xzgg0g7h329.png)

```dart
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:

![Border Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc3xz0e9q4regxd3ga0m.png)

```dart
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!

![SVG Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv6l0218lejdw495f4id.png)

![SVG Flutter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/053nko7asbpm5zbs3nei.png)

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😎