I’m trying to recreate a button design from Figma in my Flutter app. The design has a gradient background that goes from orange (#F8A170) to yellow (#FFCD61) with rounded corners.
I’ve been trying to use a Container widget with an ElevatedButton as a child, and I made the button background transparent, but I can’t get it to match the Figma design. The gradient doesn’t appear correctly. What’s the proper way to implement this kind of gradient button in Flutter? Should I be using a different approach instead of Container with ElevatedButton?
skip elevatedbutton entirely - just use a container with boxdecoration gradient. container(decoration: boxdecoration(gradient: lineargradient(colors: [color(0xFFF8A170), color(0xFFFFCD61)])), child: material(color: colors.transparent, child: inkwell(ontap: (){}, child: padding(...)))) works every time.
The Container+ElevatedButton combo doesn’t work because you’re fighting two styling systems. ElevatedButton has its own Material theming that kills your gradient setup.
I switched to using an Ink widget inside a Material wrapper and it fixed everything. Ink handles gradients properly while keeping the Material Design interactions: Material(borderRadius: BorderRadius.circular(10), color: Colors.transparent, child: Ink(decoration: BoxDecoration(gradient: LinearGradient(colors: [Color(0xFFF8A170), Color(0xFFFFCD61)], stops: [0.15, 0.98]), borderRadius: BorderRadius.circular(10)), child: InkWell(borderRadius: BorderRadius.circular(10), onTap: () {}, child: Container(padding: EdgeInsets.all(16), alignment: Alignment.center, child: Text('Button'))))).
You keep the ripple effect but get full control over how the gradient looks. Way better than wrestling with ElevatedButton’s defaults.
Here’s what works better: use Material widget with a custom gradient container. The problem with Container+ElevatedButton? ElevatedButton has its own Material widget that messes with your gradient. Just wrap your gradient Container with Material and use InkWell for ripples: Material(borderRadius: BorderRadius.circular(10), child: Container(decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment(-0.98, 0.21), end: Alignment(0.98, -0.21), colors: [Color(0xFFF8A170), Color(0xFFFFCD61)])), child: InkWell(borderRadius: BorderRadius.circular(10), onTap: () {}, child: Container(padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24), child: Text('Button'))))). You get proper Material Design ripples and keep your exact Figma gradient. The angle calculation matches your 92 degree CSS gradient way better than stops.
Had the same problem converting Figma designs to Flutter. Wrapping ElevatedButton in a Container just fights against the button’s default styling. Skip the ElevatedButton completely and use GestureDetector or InkWell around a Container with gradient decoration: Container(decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Color(0xFFF8A170), Color(0xFFFFCD61)], stops: [0.15, 0.98]), borderRadius: BorderRadius.circular(10)), child: InkWell(onTap: () {}, child: Padding(...))). You get full control over appearance and it matches Figma way better. Ditch ElevatedButton entirely for custom gradients.
Use DecoratedBox instead of Container - it’s way better for gradient performance. Had the same problem recreating Figma designs and DecoratedBox handles gradients much more efficiently in complex layouts.
Those alignment values match your 92-degree CSS gradient way better than centerLeft/centerRight. Plus DecoratedBox fixes rendering artifacts that show up with Container when you’ve got multiple stops in your gradient.
Been there with Figma to Flutter conversions. The real issue is manually coding gradients when you could automate everything.
I used to waste hours translating gradients and styling from Figma. Now automation handles it. I set up a workflow that reads Figma designs and generates exact Flutter code with proper gradient values, border radius, everything.
Your gradient becomes automatic. No more guessing alignment values or fighting ElevatedButton styling. The workflow pulls exact gradient data from Figma API and outputs clean Flutter Container widgets with BoxDecoration.
Works for design changes too. Designer updates the gradient? Code updates automatically. No more manual conversion headaches.
This saves me 5-10 hours per week on UI implementation. Way better than hand coding every gradient and dealing with Flutter widget quirks.