今天要來分享的是在實作 Adaptive App 時要注意的細節
在昨天的內容中，我們已經可以實作出根據視窗大小來選擇何種 Layout 來呈現畫面！
而今天我們則要針對跨平台應用程式來實作出依據平台選擇何種適當的 Widgets。
那就讓我們開始今天的主題吧！

Contextual layout

Screen-based breakpoints

同昨天透過視窗大小來進行設計，我們也可以在實作前先行定義各平台的合適範圍後再進行實作。

class FormFactor {
  static double desktop = 900;
  static double tablet = 600;
  static double handset = 300;
}

ScreenType getFormFactor(BuildContext context) {
  double deviceWidth = MediaQuery.of(context).size.shortestSide;
  if (deviceWidth > FormFactor.desktop) return ScreenType.Desktop;
  if (deviceWidth > FormFactor.tablet) return ScreenType.Tablet;
  if (deviceWidth > FormFactor.handset) return ScreenType.Handset;
  return ScreenType.Watch;
}

透過取得裝置的視窗大小並取得回傳應該實作的平台
然而除了透過平台去區分以外
也可以透過視窗大小去做一個切分

enum ScreenSize { Small, Normal, Large, ExtraLarge }

ScreenSize getSize(BuildContext context) {
  double deviceWidth = MediaQuery.of(context).size.shortestSide;
  if (deviceWidth > 900) return ScreenSize.ExtraLarge;
  if (deviceWidth > 600) return ScreenSize.Large;
  if (deviceWidth > 300) return ScreenSize.Normal;
  return ScreenSize.Small;
}

除了單純改變視窗 Layout 外
還可以透過視窗大小來決定呈現 Widgets 的方向

bool isHandset = MediaQuery.of(context).size.width < 600;
return Flex(
    children: [Text('Foo'), Text('Bar'), Text('Baz')],
    direction: isHandset ? Axis.vertical : Axis.horizontal);

亦或是直接更換一個 Widget 來做呈現

Widget foo = Row(
  children: [
    ...isHandset ? _getHandsetChildren() : _getNormalChildren(),
  ],
);

參考資料

強而有力的官網後盾