# 為何需要關注不同尺寸裝置的開發？

* [Google io 發布大尺寸裝置](https://android-developers.googleblog.com/2023/06/multi-device-at-google-io.html)
* [蘋果iPhone 14 Plus 取代mini 策略非常成功](https://mrmad.com.tw/iphone-14-plus-outsells-iphone-13-mini)
* Fugle android app 使用者裝置分佈（大尺寸裝置使用者目前佔少數，也有可能是在大尺寸上體驗不佳導致）

<!--
-->

# Flutter 的目標

Flutter的主要目標之一是創建一個允許您從單一代碼庫開發在任何平台上看起來和感覺都很棒的應用程序。這意味著您的應用程序可能出現在許多不同尺寸的屏幕上，從手錶到具有兩個屏幕的可摺疊手機，再到高清顯示器。

## 一、適配（Adaptive）與響應（Responsive）

### 1.1. Adaptive（適配）

簡單地為平板和手機創建兩個不同的佈局或屏幕。針對特定裝置或屏幕尺寸設計，並為其創建特定的佈局。

### 1.2 Responsive（響應）

自動調整以適應不同屏幕尺寸和方向，不需要為每個裝置創建特定佈局。

## 二、不同尺寸螢幕的解決方案

裝置有各種尺寸，並且在不斷增加。Material 3提出的解決方案是建立尺寸寬度類別，以確定佈局適用於各種尺寸的設備。


### 寬度的斷點分類

* **Compact**：包括更窄的螢幕，例如手機和折疊螢幕的前螢幕。
* **Medium**：包括縱向的平板電腦和展開的折疊設備。
* **Expanded**：橫向的手機，展開的折疊設備，平板電腦、筆記型電腦。


在這些設備中，用戶可以自由調整顯示大小和可摺疊設備等大小，這些設備可以在幾秒內從 Compact 轉為 Expanded。



# 如何創建響應式Flutter應用程序？

1. 裝置方向變化時重建佈局
2. 為Flutter中的大屏幕創建佈局
3. 使用 Master-Detail Flow 和 OrientationBuilder

- [nick45chen/LargeScreensSample-Flutter](https://github.com/nick45chen/LargeScreensSample-Flutter)

透過這些工具，可以有效地管理不同屏幕尺寸和方向，減少重複代碼。

# 參考資料

* [flutter.dev - adaptive-responsive](https://docs.flutter.dev/ui/layout/responsive/adaptive-responsive)
* [material - Better design for bigger screens](https://material.io/blog/material-you-large-screens)
* [Material You for large screens](https://io.google/2023/program/456db54e-d72e-44e2-9522-958f17cf5ece/)
* [Android at large: how to bring optimized experiences to the big screen](https://medium.com/androiddevelopers/android-at-large-how-to-bring-optimized-experiences-to-the-big-screen-a50a6784e59d)
* [支持不同的屏幕尺寸](https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes?hl=zh-cn#window_size_classes)
* [human-interface-guidelines/split-views](https://developer.apple.com/design/human-interface-guidelines/split-views)