CODEWITHSUNDEEP
cssflutterdartfigmaflutter-design
Maruf Hassan
Maruf Hassan

Reputation: 1248

How to convert Linear Gradient from Figma to Flutter/Dart code

I have a design in Figma that contains Linear Gradient color which I want to import to Dart Code.

The design looks like this

enter image description here

The color code is provided in CSS in Figma

background: linear-gradient(110.52deg, #FFE080 0%, #CB5F00 100%);
border-radius: 15px;

I wanted to convert the CSS to Dart to stick to as close to the design as possible and I found two ways to do it but none of them are giving me the exact colors.

Try 1 - CSS to Flutter code website - https://flutterkit.github.io/c2f/

The site converts to the following code with some percentage which Flutter doesn't understand.

enter image description here

Try 2- Figma to Flutter Plugin - https://www.figma.com/community/plugin/844008530039534144/FigmaToFlutter

This gives me a code that works in Flutter but isn't the exact design.

Container(
        width: 340,
        height: 208,
        decoration: BoxDecoration(
          borderRadius : BorderRadius.only(
            topLeft: Radius.circular(15),
            topRight: Radius.circular(15),
            bottomLeft: Radius.circular(15),
            bottomRight: Radius.circular(15),
          ),
      gradient : LinearGradient(
          begin: Alignment(0.5841947793960571,0.20964664220809937),
          end: Alignment(-0.20964664220809937,0.21863843500614166),
          colors: [Color.fromRGBO(255, 223, 127, 1),Color.fromRGBO(202, 95, 0, 1)]
        ),
  ),
),

This gives me this image which is opposite and much darker and lighter on the corners than the original design.

enter image description here

I want to stick to as close to the design as possible and not make it using some guess work. Please help me.

Upvotes: 1

Views: 5807

Answers (1)

Guillaume Roux
Guillaume Roux

Reputation: 7308

I've made some small changes to your generated code so it will have a better result:

Code Sample

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final color1 = Color(0xFFFFE080);
    final color2 = Color(0xFFCB5F00);
    return Container(
      width: 340,
      height: 208,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        gradient: LinearGradient(colors: [color1, color2]),
      ),
    );
  }
}

Screenshot

enter image description here

Try the full code on DartPad

Upvotes: 2

Related Questions