Translating Figma's Linear Gradient to Flutter: Seeking Accurate Color Match

Other Questions Figma
1

I’m working on a Flutter project and I’m stuck trying to replicate a linear gradient from my Figma design. The gradient goes from a light yellow to a dark orange. I’ve tried a couple of methods to convert it but I’m not getting the exact colors I need.

First, I used an online CSS to Flutter converter. It gave me some code but it had percentages that Flutter doesn’t understand. Then I tried a Figma to Flutter plugin. This one actually works in Flutter but the colors are off. The gradient is reversed and the shades are much darker and lighter at the edges than what I want.

Here’s what I’ve got so far:

Container(
  width: 300,
  height: 180,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15),
    gradient: LinearGradient(
      begin: Alignment(0.6, 0.2),
      end: Alignment(-0.2, 0.2),
      colors: [
        Color.fromRGBO(255, 220, 120, 1),
        Color.fromRGBO(200, 90, 0, 1)
      ]
    ),
  ),
)

This code creates a gradient, but it’s not quite right. How can I get the Flutter gradient to match my Figma design exactly? I really want to avoid guesswork and get as close to the original as possible. Any tips or tricks would be super helpful!

2

As someone who’s been through the Figma-to-Flutter struggle, I feel your pain. Here’s what worked for me:

First, ditch the online converters. They’re often unreliable. Instead, manually pick your colors in Figma using the eyedropper tool. Take samples from multiple points along the gradient for better accuracy.

In Flutter, use these exact color values with Color(0xFFXXXXXX) format. This gives you pixel-perfect color matching.

For the gradient direction, play with the begin and end Alignment values. It’s a bit of trial and error, but you’ll get there. Something like begin: Alignment(1.0, -0.5), end: Alignment(-1.0, 0.5) might work better for you.

Don’t forget to check your gradient on different devices. Colors can vary slightly across screens, so it’s worth testing on a few to ensure consistency.

Lastly, if you’re still not happy, consider using a custom shader. It’s more advanced, but gives you ultimate control over your gradient.

1 Like
3

yo, figma-to-flutter can be a pain. I’ve been there too. what worked for me was using the eyedropper in figma to get exact colors, then using those in flutter with Color(0xFFXXXXXX). For gradient direction, play with begin and end alignments. might take some trial n error but you’ll get it. also, check on different screens cuz colors can look different. good luck!

4

Having faced similar challenges, I can offer some insights. Figma’s color space differs from Flutter’s, which can cause discrepancies. To achieve a more accurate match, try using the eyedropper tool in Figma to sample colors at different points along your gradient. Then, use these exact color values in your Flutter code.

For the gradient direction, adjust the ‘begin’ and ‘end’ properties in your LinearGradient. Experiment with these values to match Figma’s angle. You might also need to add more color stops for a smoother transition.

Consider using a color management library like ‘flutter_color_models’ for precise color conversions. Remember, screen calibration can affect perception, so test on multiple devices for consistency. With some fine-tuning, you should be able to closely replicate your Figma gradient in Flutter.