Converting Figma gradient design to Flutter Container widget

Other Questions Figma
1

I’m working on converting a Figma design to Flutter but running into issues with the gradient rendering.

My Figma design has two layers:

  • Base layer: solid blue color #003274
  • Overlay layer: radial gradient from white with 40% opacity to transparent

The CSS equivalent looks like this:

background: radial-gradient(100% 245.99% at 0% 0%, 
  rgba(255, 255, 255, 0.4) 0%, 
  rgba(255, 255, 255, 0) 100%);

Here’s my Flutter implementation:

Container(
  decoration: BoxDecoration(
    color: Color(0xff003274),
    gradient: RadialGradient(
      colors: [
        Color.fromARGB(102, 255, 255, 255), 
        Color.fromARGB(0, 255, 255, 255)
      ],
      radius: 2.5,
      center: Alignment(-1.0, -1.0),
    ),
  ),
  width: double.infinity,
  height: double.infinity,
)

The problem is that instead of getting a blue background with white gradient overlay, I’m seeing a grey gradient effect. How can I properly translate this Figma gradient design to Flutter code?

2

Been dealing with this same headache for years. Stack works but gets messy with complex designs and multiple gradient overlays.

I automate the whole Figma to Flutter conversion now. Built a workflow that pulls design tokens from Figma, processes layers (including gradients and blend modes), then spits out Flutter widget code automatically.

For your case, it handles the layer stacking and builds the right Container hierarchy - no manual blend mode figuring or color math. Even converts those annoying Figma percentage values to proper Flutter coordinates.

Saves me hours weekly vs manually translating each gradient. Plus keeps the team consistent since everyone gets identical generated code.

Pretty easy to set up with the right tool: https://latenode.com

3

Had this exact issue building a dashboard last month. BoxDecoration treats gradients as replacements for background colors, not overlays - that’s why your Figma layered approach breaks. Here’s what worked: wrap everything in a Container with the blue background, then stack a second Container with just the RadialGradient on top. But the real fix was tweaking the gradient stops - try [0.0, 0.7, 1.0] with three colors instead of two. Your radius at 2.5 is probably too high. I got way better results between 1.0-1.5 depending on container size. The center positioning looks right for that top-left origin from your CSS though.

4

yep, flutter does gradients kinda weird compared to figma. best way is to use a stack with two containers - one for your solid blue bg and another for the radial gradient. if you want more accuracy to figma, check out BlendMode.overlay or BlendMode.softLight with a CustomPainter.

5

The gradient blending issue happens because Flutter calculates transparency differently than Figma. When you use Color.fromARGB(102, 255, 255, 255) for 40% opacity, Flutter doesn’t consider the blue background during blending.

I’ve had luck with ColorFilter.mode and Stack layouts, but try this first: skip the transparent white and calculate the actual blended colors yourself. Take your 40% white over the blue base (#003274) - that’s roughly #4D5F94. Start there and fade to your blue base instead of going transparent.

This single-container method usually matches Figma better since you’re avoiding the transparency rendering differences between Flutter and browsers.

6

This happens because Flutter’s BoxDecoration can’t handle both a solid color and gradient at the same time. When you set both color and gradient, the gradient just overwrites the color completely. To match your Figma design, stack two containers instead. Put your solid blue background in the bottom container, then add the radial gradient with transparent colors in the top container. This mimics how Figma layers work and should give you that blue background with the white gradient overlay you’re after.