Translating CSS Styles from Figma to Flutter Widgets

[SwiftCoder42]

I’m developing an app using Flutter, and I need to translate a button’s design from Figma into code. The button must have specific styles like:

Container(
  decoration: BoxDecoration(
    color: Color(0xFFFFA01F),
    borderRadius: BorderRadius.circular(100),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.4),
        offset: Offset(12, -9),
        blurRadius: 20,
        inset: true,
      ),
    ],
  ),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Press Here'),
  ),
)

I’m uncertain how to accurately reflect the design elements from Figma in Flutter. What are the best practices for achieving this styling in my Flutter application?

[bellagarcia]

your code’s solid, but flutter doesn’t handle inset shadows that way. you’ll need a custom painter or stack a few containers with different shadows to match what you’ve got in figma. also, try TextButton instead of ElevatedButton - gives you way better control over styling.

[JumpingRabbit]

You’re wrapping an ElevatedButton inside a Container with decoration - that’s your problem right there. ElevatedButton has its own styling that conflicts with it. I switched to a Material widget with InkWell for taps, then applied the BoxDecoration directly to that. For inset shadows, Flutter’s BoxShadow doesn’t really support them, so I used multiple Containers with different shadow offsets to fake the effect. Also, double-check Figma’s color values and shadow settings - the export’s often off and you’ll need to tweak things manually.