I’m working on a Flutter app and have a design in Figma that I need to implement. There’s a specific button design that has these CSS properties and I’m not sure how to recreate the same look in Flutter:
I know Flutter uses different styling approaches compared to CSS, so I’m wondering what’s the best way to convert these visual properties into Flutter code. Should I use Container decoration or are there other Flutter widgets that would work better for this kind of styling? Any help with the equivalent Flutter implementation would be great.
just go for a Container with BoxDecoration. set the color to that hex value and use borderRadius as 50. for the shadow, add boxShadow and play with the values a bit, it’ll get close to that effect.
Container with BoxDecoration is definitely your best bet here. Once you get the hang of translating Figma to Flutter, it’s pretty straightforward. For your button, set the Container’s decoration to BoxDecoration. Background color maps directly to the color property, and you can handle border radius with borderRadius: BorderRadius.circular(50). Inset shadows are tricky though - Flutter doesn’t have a direct way to do them. You’ll probably need multiple containers or a custom painter for complex effects. For simpler designs, try playing with offsets and darker color shades to fake the inset look.
I deal with Figma to Flutter conversion all the time. Container and BoxDecoration work fine, but they’re a mess when you’re doing this across multiple projects.
The real headache? Inset shadows need custom painters or weird multi-container hacks. And you’re manually converting every CSS property over and over.
I’ve automated this whole thing now. Built a process that grabs Figma design tokens and spits out Flutter widget code with proper BoxDecoration. No more manual hex color conversion, border radius math, or guessing at shadow values.
For what you’re doing, it handles the background color, sets up BorderRadius.circular(50), and generates the custom painter for inset shadows. Takes 30 seconds instead of 30 minutes of guesswork.
Best part? It scales. Designers update Figma, Flutter code updates automatically. No more design debt or inconsistent stuff throughout your app.
Container with BoxDecoration works great for bringing Figma designs into Flutter. I’ve been using this approach for two years and it handles most styling needs really well. Wrap your button in a Container and add BoxDecoration with color Color(0xFFFFA01F) and BorderRadius.circular(50) for the rounded corners. For that inset shadow, use the boxShadow property and set the offset to match your CSS values (15px/-12px). Just heads up - Flutter renders shadows differently than CSS, so you’ll probably need to tweak the blur and opacity to get it looking right. If you’re using an actual button widget instead, ElevatedButton.styleFrom() gives you better customization options.