在昨天的文章中，我們學會了基本的 Layout 以用來可完成 UI 設計師提供的畫面要求
但如果我們的服務需要在不同螢幕大小下有各自的呈現方式
此時建立自適應 APP 的需求便產生了！
接下來，我會用今天的篇幅稍微描述一下如何打造具備自適應(Adaptive)及響應式(Responsive) APP 的方式！

Responsive

在 Responsive App 中比較著重的是在不同的視窗大小所呈現出來的 UI 排列效果
也因此當我們的 App 同時要服務手機、平板甚至是桌面應用程式時便需要特別注意的地方！

Adaptive

在 Adaptive App 中，主要考量是在各個不同平台中使用者所習慣的操作會有所不同
諸如手機畫面的拖拉、Web畫面的滑鼠滾輪、鍵盤輸入的方式...
因此 Adaptive 所要完成的課題是在這些情景上皆能夠操作順遂

如何創建 Responsive App

在實作 Responsive 設計時
我們可以透過 LayoutBuilder 及 MediaQuery.of() 來實作達成！

MediaQuery.of()

可獲取當前的螢幕大小資訊、定位等資訊
引此可取得畫面內容來做 Layout 的變更

LayoutBuilder

可以透過內部的 BoxContraints 的資料來做畫面上的調整，諸如：手機轉向、視窗大小變動...等

其他相關的 Widgets

AspectRatio

可以調整 Widget 的長寬比例，透過設定比例值（width:height)

FittedBox

可使其所控制的 Widgets 符合空間的限制透過設定 fit

FractionallySizedBox

如果要設定固定的長寬比例(Ex. Widgets 寬度佔總畫面 70%, 總畫面 10%)便可透過這項 Widgets 進行實作

OrientationBuilder

透過根據父節點的定位來建立一個 Widget Tree

Layout Builder Example

透過 Layout Builder 便能得知目前的長度、寬度
並且根據長寬的狀況能夠自動更改畫面呈現的效果

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 500) {
          // 可替換成其他的 Screen
          return Text(
            "max-width ${constraints.maxWidth}  less than 500",
            style: const TextStyle(color: Colors.red, fontSize: 24),
          );
        } else {
          return Text("max-width ${constraints.maxWidth} greater than 500",
              style: const TextStyle(color: Colors.green, fontSize: 24));
        }
      },
    ));
  }
}