如何将Figma中的CSS转换为Flutter代码？以及如何实现带有指定CSS属性的Flutter按钮？

Hey there! Let's break down your two Figma-to-Flutter questions clearly and practically.

Figma's CSS exports are a great starting point, but they need a bit of tweaking to fit Flutter's widget-based styling system. Here are my go-to methods:

• Manual Conversion (Best for Learning & Control)
  Figma's CSS maps directly to Flutter's BoxDecoration, TextStyle, and other style classes, but the syntax differs. For example:

  • CSS background: #FFA01F → Flutter Color(0xFFFFA01F) (the first two hex digits are opacity; FF means fully opaque)
  • CSS border-radius: 10px → Flutter BorderRadius.circular(10)
  • CSS box-shadow: 2px 2px 4px rgba(0,0,0,0.2) → Flutter BoxShadow(offset: Offset(2,2), blurRadius:4, color: Color.fromRGBO(0,0,0,0.2))
    Just copy the CSS from Figma (right-click element → Copy → Copy CSS) and translate each property to Flutter's equivalent.

• Automated Plugins for Speed
  If you're working with complex designs, use Figma plugins like Figma to Flutter or Flutter Generator. These tools scan your Figma components and spit out ready-to-use Flutter code, including layouts and styles. Just note that auto-generated code can be a bit verbose, so it's good to clean it up for readability.

• Use Figma's Flutter Export (Beta)
  Some versions of Figma have a direct "Export as Flutter" option for components. Check the export menu—this gives you a head start with widget structure and basic styles.

First, let's recap your target CSS for reference:

background: #FFA01F; box-shadow: inset 12px -9px 20px rgba(0, 0, 0, 0.4); border-radius: 100px;

The key challenge here is the inner box shadow, since Flutter's default button components don't support inset shadows out of the box. Here are two solid implementations:

Option 1: Custom Container-Based Button #

This is straightforward and gives you full control over every style:

// Wrap this in a GestureDetector if you need tap functionality
Container(
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  decoration: BoxDecoration(
    color: const Color(0xFFFFA01F), // Matches background: #FFA01F
    borderRadius: BorderRadius.circular(100), // Capsule-shaped border
    boxShadow: const [
      BoxShadow(
        color: Color.fromRGBO(0, 0, 0, 0.4), // rgba(0,0,0,0.4)
        offset: Offset(12, -9), // Matches inset 12px -9px
        blurRadius: 20, // 20px blur effect
        blurStyle: BlurStyle.inner, // Critical: enables inner shadow
      ),
    ],
  ),
  child: const Text(
    "Tap Me",
    style: TextStyle(
      color: Colors.white,
      fontSize: 16,
      fontWeight: FontWeight.w500,
    ),
  ),
)

Option 2: TextButton with Custom Style (Flutter Best Practice) #

If you want to use Flutter's built-in button widget (for accessibility and default tap effects), wrap the text in a container with the inner shadow:

TextButton(
  onPressed: () {
    // Add your tap logic here
    print("Button tapped!");
  },
  style: TextButton.styleFrom(
    padding: EdgeInsets.zero, // Remove default padding to fit our container
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(100),
    ),
  ),
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    decoration: const BoxDecoration(
      color: Color(0xFFFFA01F),
      borderRadius: BorderRadius.all(Radius.circular(100)),
      boxShadow: [
        BoxShadow(
          color: Color.fromRGBO(0, 0, 0, 0.4),
          offset: Offset(12, -9),
          blurRadius: 20,
          blurStyle: BlurStyle.inner,
        ),
      ],
    ),
    child: const Text(
      "Tap Me",
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
        fontWeight: FontWeight.w500,
      ),
    ),
  ),
)

Key Notes: #

• The BlurStyle.inner property is what makes the shadow inset—this is supported in Flutter 2.0 and above.
• The Offset(12, -9) matches the CSS inset 12px -9px (positive x moves shadow right, negative y moves it up).
• Using BorderRadius.circular(100) creates a capsule shape, just like border-radius: 100px in CSS.

内容的提问来源于stack exchange，提问作者May Hatuel