使用 Flutter 开发 App 时，想要根据 Figma 设计稿开发出响应式 UI 界面

在使用 Flutter 开发 App 时，想要根据 Figma 设计稿开发出响应式 UI 界面（Responsive UI），以适配不同尺寸和分辨率的手机设备，需要从 设计阶段 和 编码实现阶段 双向配合。以下是详细的实现思路与方法：

---

🎯 一、目标：什么是“响应式 Flutter UI”？

响应式 UI 的核心是：

• 在不同屏幕尺寸上保持布局合理
• 控件自动适应（如按钮变小、文字换行、组件隐藏/显示）
• 用户体验一致

---

🧱 二、设计阶段：Figma 如何配合响应式开发

✅ 1. 使用 Auto Layout + Constraints 布局

• Figma 的 Auto Layout 能帮助设计师构建灵活的组件结构
• 使用 Frame 设置为 Responsive / Fixed Size，模拟不同屏幕下的表现

✅ 2. 多设备预览（Multiple Frames）

• 创建多个 Frame（如手机、平板），展示不同屏幕下的布局变化
• 注明哪些组件是“响应式变化”的（如导航栏折叠、图片切换布局）

✅ 3. 提供设计系统（Design System）

• 包括颜色、字体、间距、断点等变量，方便开发者统一管理

---

💻 三、Flutter 实现响应式 UI 的关键技术

✅ 1. 使用 MediaQuery 获取屏幕信息

final size = MediaQuery.of(context).size;
double screenWidth = size.width;
double screenHeight = size.height;

通过获取屏幕宽高，可以判断当前设备类型（手机/平板），并调整布局。

---

✅ 2. 使用 LayoutBuilder 构建自适应布局

LayoutBuilder 是响应式布局的核心工具之一：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return DesktopLayout(); // 平板或大屏布局
    } else {
      return MobileLayout(); // 手机布局
    }
  },
);

---

✅ 3. 使用 OrientationBuilder 判断横竖屏

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.portrait) {
      return PortraitLayout();
    } else {
      return LandscapeLayout();
    }
  },
);

---

✅ 4. 使用第三方响应式库（可选）

🔹 responsive_builder

dependencies:
  responsive_builder: ^0.7.0

使用示例：

SizedBox(
  width: double.infinity,
  height: 200,
  child: ScreenTypeLayout.builder(
    mobile: (_) => MobileWidget(),
    tablet: (_) => TabletWidget(),
    desktop: (_) => DesktopWidget(),
  ),
)

---

✅ 5. 使用百分比布局（Flex / Expanded / Flexible）

Flutter 的 Flex 布局非常适合响应式 UI：

Row(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

---

✅ 6. 使用 BoxFit、AspectRatio 等控件适配图像

Image.asset(
  'assets/image.png',
  fit: BoxFit.cover,
),

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.grey),
)

---

✅ 7. 使用 FontSize 自适应（可选）

你可以根据屏幕宽度动态设置字体大小：

double adaptiveFontSize(double baseSize, BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  return baseSize * (screenWidth / 375); // 以 iPhone 8 为基准
}

---

📦 四、推荐实践方式：基于 Figma 的响应式开发流程

步骤	内容
1	Figma 设计多设备视图（Mobile / Tablet / Desktop）
2	使用插件导出样式数据（颜色、字体、间距）
3	使用 LayoutBuilder 或第三方库区分布局
4	编写多个 Widget 组件对应不同设备
5	使用 MediaQuery 动态计算尺寸和字体
6	测试不同设备上的显示效果（Android Studio / VS Code 模拟器）

---

🧪 五、示例：一个响应式卡片组件（Card）

🎨 Figma 设计：

• 卡片内容包含头像、标题、描述、按钮
• 在小屏幕上垂直排列，大屏幕上水平排列

💻 Flutter 实现：

class ResponsiveCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _DesktopCard();
        } else {
          return _MobileCard();
        }
      },
    );
  }
}

class _MobileCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          ListTile(title: Text('标题')),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('这是描述文字'),
          ),
          ButtonBar(
            children: [ElevatedButton(onPressed: () {}, child: Text('详情'))],
          )
        ],
      ),
    );
  }
}

class _DesktopCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: [
          SizedBox(width: 80, height: 80, child: CircleAvatar(child: Text('A'))),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('标题', style: Theme.of(context).textTheme.headline6),
                Text('这是描述文字'),
              ],
            ),
          ),
          ElevatedButton(onPressed: () {}, child: Text('详情')),
        ],
      ),
    );
  }
}

---

📈 六、进阶技巧（可选）

• 使用 flutter_screenutil 进行适配（dp/sp 适配）
• 使用 [Provider / Riverpod] 管理全局主题和设备状态
• 使用 [AdaptiveTheme] 实现深色/浅色模式切换
• 使用 [GetX / Bloc] 管理响应式逻辑和状态

---

✅ 七、总结

关键词	方法
屏幕尺寸	MediaQuery
响应式布局	LayoutBuilder + Expanded
横竖屏切换	OrientationBuilder
多设备适配	第三方库 responsive_builder
字体适配	动态计算 fontSize
图片适配	BoxFit, AspectRatio
设计支持	Figma 多 Frame 设计 + Auto Layout

---