How to create gradient background buttons in Flutter from Figma design

[ameliat]

I’m trying to recreate a button design from Figma in my Flutter app. The design has a gradient background that goes from orange to yellow with rounded corners.

Here’s the original gradient CSS I’m working from:

background: linear-gradient(92deg, #F8A170 15%, #FFCD61 98%);
border-radius: 10px;

I’ve been trying to implement this by wrapping an ElevatedButton inside a Container widget and applying the gradient to the container. I set the button’s background to transparent but I’m not getting the look I want.

What’s the proper way to create a gradient button in Flutter that matches this Figma design? Should I be using a different approach than Container with ElevatedButton?

[lucask]

I’ve hit this exact problem before. Skip ElevatedButton completely - it just makes custom gradients way harder than they need to be. Use a Container with BoxDecoration wrapped in InkWell instead. Way cleaner.

For that 92-degree angle from Figma, use LinearGradient with begin: Alignment(-0.99, 0.0) and end: Alignment(0.99, 0.0). Set your colors to [Color(0xFFF8A170), Color(0xFFFFCD61)] with stops at [0.15, 0.98] - that’ll match your CSS perfectly.

Don’t forget padding inside the Container or your button dimensions will be off. And check if you need boxShadow for elevation - Figma designs usually have subtle shadows that are easy to miss.

[bellagarcia]

Drop ElevatedButton and go with GestureDetector + Container instead. Just wrap a Container (with BoxDecoration for your gradient and borderRadius) in a GestureDetector for the onTap. No transparency headaches or button conflicts. Perfect match for Figma designs.

[alexlee]

Your Container approach isn’t great - it messes with button states and elevation. Try a custom widget with Material and InkWell instead. Wrap your gradient Container in a Material widget (use MaterialType.transparency), then slap an InkWell on top for proper touch feedback. You’ll get full gradient control while keeping native button behavior. For that specific gradient, use LinearGradient with colors [Color(0xFFF8A170), Color(0xFFFFCD61)] and set begin/end to Alignment.centerLeft and Alignment.centerRight - that’ll match your 92-degree CSS angle. BorderRadius.circular(10) handles the corner radius perfectly. This works way better than trying to jam ElevatedButton into a gradient setup.