在使用 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 的響應式開發流程

🧪 五、示例：一個響應式卡片組件（Card）

🎨 Figma 設計：

• 卡片內容包含頭像、標題、描述、按鈕
• 在小屏幕上垂直排列，大屏幕上水平排列

💻 Flutter 實現：

class ResponsiveCard extends StatelessWidget {@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (context, constraints) {if (constraints.maxWidth > 600) {return _DesktopCard();} else {return _MobileCard();}},);}
}class _MobileCard extends StatelessWidget {@overrideWidget 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 {@overrideWidget 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] 管理響應式邏輯和狀態

? 七、總結