# 使用 flutter 建構 Expense Tracker app

原始碼：<https://github.com/WangShuan/flutter-03-expense_tracker>

該專案主要架構有一個 Appbar ，裏面顯示 app 標題以及 icon 按鈕，點擊 icon 按鈕後可開啟 modal 以新增消費紀錄； Appbar 下方則顯示圖表，分別列出每種類別的消費佔比；最後圖表下方則是列出所有消費紀錄的清單，其中有消費類別、標題、消費日期以及消費金額。

## 定義 Expense 藍圖

`uuid` 套件可用來生成隨機的唯一 id，可通過指令 `flutter pub add uuid` 安裝套件，使用方式如下：

// 引入套件
import 'package:uuid/uuid.dart';

class Expense { // 創建 Expense 藍圖，方便後續生成 Expense 列表
  Expense({
    required this.title,
    required this.price,
    required this.date,
  }) : id = Uuid().v4(); // 用 : id = xxx 設定初始值，並將初始值設為 Uuid().v4()

  final String id;
  final String title;
  final int price;
  final DateTime date;
}

`enum` 用來定義一個類別以及該類別中可用的內容，舉例如下：

// 建立一個類別 Category 並設置其可用的內容
enum Category { 
  food,
  shopping,
  medical,
  learn,
}

// 指定 category 的類別為 Category 
// 所以 category 的值被限定為 food/shopping/medical/learn 四者其一
final Category category; 

定義與使用 category 的 icon ：

// 在 model/expense.dart 中定義 cateIcon 為各自類型所對應的 Icons
const cateIcon = {
  Category.food: Icons.restaurant,
  Category.learn: Icons.menu_book,
  Category.medical: Icons.medical_services,
  Category.shopping: Icons.store
};

// 使用 Icons
CircleAvatar(
  child: Icon(
    cateIcon[expenseData.category],
  ),
)

第三方套件 `intl` 用來格式化日期，可通過指令 `flutter pub add intl` 進行安裝，用法如下：

// 通過 DateFormat() 設置想要顯示的格式，再用 format(date) 傳入 date 進行格式化
get formatterTime {
  return DateFormat('yyyy-MM-dd').format(date);
}

## 認識與使用新的小部件

不確定陣列長度時，可使用 `ListView.builder` 小部件，該小部件外層需具有寬高，如果外層為 `Row` 或 `Column` 時，需搭配 `Expanded` 或 `SizedBox` 小部件做使用：

final List<Expense> expenseData;

Expanded(
  child: ListView.builder( // 使用 ListView.builder 小部件
    itemBuilder: (context, index) => Row( // 傳入 itemBuilder
      children: [
        Text(expenseData[index].title), // 通過 index 獲取 expenseData 中的內容
      ],
    ),
    itemCount: expenseData.length, // 設置 itemCount 為 expenseData 的長度
  ),
)

使用 `showModalBottomSheet` 方法從底部往上彈出 `modal` 以顯示表單新增消費紀錄：

appBar: AppBar( // 在 Scaffold 小部件中設置 appbar
  title: const Text('Expenses Tracker'),  // 設定 title
  actions: [ // 設定工具列的按鈕
    IconButton( // 建立一個純 icon 的按鈕
      onPressed: () { // 設定點擊後觸發的事件
        showModalBottomSheet( // 這邊使用 showModalBottomSheet 開啟一個 modal
          context: context, // 傳入 context
          builder: (ctx) => const NewExpense(), // 設置 builder 回傳一個自定義的 NewExpense 表單小部件
        );
      },
      icon: const Icon( // 設置 icon
        Icons.add,
      ),
    ),
  ],
),

表單的輸入框要用 `TextField` 小部件，為了獲取輸入的內容，需設定小部件的 `controller` 屬性，並使用 `dispose()` 方法確保當關閉 `modal` 時同時銷毀控制器：

final _titleController = TextEditingController(); // 建立輸入框控制器

@override
void dispose() { // 使用 dispose() 方法
  _titleController.dispose(); // 在不需要使用到 UI 時銷毀該控制器，以確保不會佔用到多餘的內存
  super.dispose();
}

// 綁定輸入框的控制器
TextField(
  controller: _titleController, // 綁定 controller
  decoration: const InputDecoration( // 設置樣式
    label: Text('標題'), // 設置 label
  ),
  maxLength: 30, // 設置輸入內容的最大長度限制

),

// 獲取值
print(_titleController.text);

另外在使用 `TextField` 時要注意，如果父部件為 `Row` 或 `Column`，需將 `TextField` 用 `Expanded` 小部件包住，否則會出現錯誤：

Row(
  children: [
    Expanded(
      child: TextField(
        controller: _priceController,
        decoration: const InputDecoration(
          labelText: '消費價格',
          prefixText: 'NT\$',
        ),
        maxLength: 6,
        keyboardType: const TextInputType.numberWithOptions(signed: true), // 設定鍵盤類型為數字＋符號（因為純 TextInputType.number 鍵盤類型會沒送出按鈕）
        textInputAction: TextInputAction.done, // 設定點擊送出按鈕後執行的事件為完成，會關閉鍵盤並提交（如果是 TextInputAction.next 則會跳去下一個輸入框小部件並開啟其鍵盤類型）
        onSubmitted: (value) => _submitData(), // 設定送出時要執行的事件
      ),
    ),
    const SizedBox(
      width: 30,
    ),
    // ...
  ],
),

點擊按鈕關閉 `modal` 的方法：

ElevatedButton(
  onPressed: () {
    Navigator.pop(context); // 設定這行用來關閉 modal
  },
  child: const Text('CANCEL'),
)

點擊按鈕開啟日期選擇器（使用 `showDatePicker` 方法）及顯示選中日期的做法：

DateTime? _selectedDate_; // 聲明一個變量保存選中的日期，類型為 null 或 DateTime

void _chooseDate() async { // 設定開啟日期選擇器的事件
  final d = await showDatePicker( // 通過 await 方法獲取選中的日期，通過 showDatePicker 方法開啟日期選擇器
    context: context, // 傳入 context
    initialDate: DateTime.now(), // 設置預設選中的日期
    firstDate: DateTime(2000), // 設置最小日期
    lastDate: DateTime.now(), // 設置最大日期
  );
  setState(() { // 通過 setState 更新日期並顯示在畫面上
    _selectedDate_ = d;
  });
}

// 使用
ElevatedButton.icon( // 建立一個帶 icon 的按鈕小部件
  onPressed: _chooseDate, // 設置點擊後觸發的事件為 開啟日期選擇器的事件
  label: _selectedDate_ != null // 判斷是否有選中日期，有就顯示選中的日期，沒有就顯示請選擇
      ? Text(DateFormat('yyyy-MM-dd') // 用 intl 套件格式化日期
          .format(_selectedDate_!) // 在可能為空的值後加上 ! 告訴 DART 這永遠不會是空值
          .toString())
      : const Text('請選擇日期'),
  icon: const Icon( // 設置 icon
    Icons.calendar_today,
    size: 15,
  ),
),

`DropdownButton` + `DropdownMenuItem` 小部件用來顯示類別的下拉選項：

// 宣告變量 _selectCate 為第一個 Category
Category? _selectCate = Category.values[0];

// 使用
Container( // 建立 Container 小部件當外框並設定樣式
  padding: const EdgeInsets.symmetric(
    horizontal: 15, // 設定水平的 padding
  ),
  height: 40, // 設定高度
  width: 120, // 設定寬度
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10), // 設定圓角弧度
    color: const Color.fromARGB(255, 240, 230, 250), // 設定底色
  ),
  child: DropdownButton<Category>( // 使用 DropdownButton 小部件生成下拉選單
    underline: const SizedBox(), // 設置下拉選單的外觀樣式
    isExpanded: true, // 設置擴展為 true（前提是父部件有設定寬度）
    items: Category.values // 設定下拉選項內容，這邊用 Category.values 遍歷
        .map(
          (e) => DropdownMenuItem<Category>( // 回傳 DropdownMenuItem 小部件
            value: e, // 設定選項的 value
            child: Row( // 設定 DropdownMenuItem 小部件的內容
              children: [
                Icon(
                  cateIcon[e],
                  size: 18,
                  color: Theme.of(context).primaryColor,
                ),
                const SizedBox(
                  width: 8,
                ),
                Text(
                  cateZhName[e].toString(),
                  style: textStyle,
                ),
              ],
            ),
          ),
        )
        .toList(), // 最後用 toList() 轉為 [ DropdownMenuItem(), DropdownMenuItem()... ]
    value: _selectCate, // 設定選中的選項
    icon: const Icon(
      Icons.arrow_drop_down_rounded,
      size: 15,
    ),
    onChanged: (value) { // 每次選中項目時觸發 onChanged，並會傳入 DropdownMenuItem 的 value
      setState(() { // 將選中的狀態設為 value
        _selectCate = value;
      });
    },
  ),
)

撰寫提交表單的事件，如驗證無誤則添加消費紀錄、如驗證有誤則通過 `showDialog` 方法顯示 `AlertDialog` 小部件：

void _submitData() { // 建立一個提交表單用的事件
  if (_titleController.text.trim().isEmpty || // 判斷去除多餘空白後，是否有輸入標題
      _priceController.text.trim().isEmpty || // 判斷去除多餘空白後，是否有輸入價格
      int.parse(_priceController.text) <= 0 || // 判斷將文字轉為數字後是否有內容且小於等於零
      _selectedDate == null) { // 判斷是否有選擇日期
    showDialog( // 顯示對話框
      context: context,
      builder: (context) => AlertDialog( // 顯示警告對話框小部件
        title: const Text('格式錯誤'), // 設定標題
        content: const Text('請確保您輸入了有效的標題、消費價格、消費日期與消費類別。'), // 設置警告內容
        actions: [
          TextButton( // 設置功能按鈕
            onPressed: () {
              Navigator.pop(context); // 點擊後關閉對話框
            },
            child: const Text('確定'),
          )
        ],
      ),
    );
    return; // 返回，不執行下方程式碼
  }
  
  // 如果上方驗證沒問題則觸發以下程式碼
  widget.addData(Expense( // 這邊的 addData 是從 expenses.dart 傳入的，用來新增消費紀錄資料
    title: _titleController.text.trim(),
    price: int.parse(_priceController.text),
    date: _selectedDate!,
    category: _selectCate!,
  ));
  Navigator.pop(context); // 新增後關閉 modal
}

優化 `modal` 讓鍵盤不會擋到內容的兩種方法：

第一種，讓 `modal` 佔據完整可用高度，程式碼如下：

showModalBottomSheet(
  context: context,
  builder: (ctx) => NewExpense(_addData),
  isScrollControlled: true, // 新增這個設定，讓 modal 佔據完整的可用高度
);

> 當 `modal` 佔據完整可用高度後，會發現部分內容將被手機本身的手機本身的功能遮蓋，比如相機鏡頭等等，所以需要讓 `modal` 的 `padding-top` 預留多一些空間，以確保能完整瀏覽 `modal` 的內容。

第二種，通過 `MediaQuery.of(context).viewInsets.bottom` 獲取鍵盤高度，並利用 `padding-bottom` 讓 `modal` 的內容往上推，程式碼如下：

showModalBottomSheet(
  context: context,
  builder: (ctx) => Padding(
    padding: EdgeInsets.only(
      bottom: MediaQuery.of(context).viewInsets.bottom, // 設置 paddint-bottom 為鍵盤高度
    ),
    child: NewExpense(_addData),
  ),
  isScrollControlled: true,
);

左/右滑動觸發事件可使用 `Dismissible` 小部件來實現，以本例來說，可通過滑掉單筆消費紀錄將該筆紀錄刪除：

void removeExpenses(Expense expense) {
  setState(() {
    expensesData.remove(expense);
  });
}

Dismissible(
  key: ValueKey(expenseData[i].id), // 設置唯一 key
  child: ExpenseItem(expenseData[i]), // 設定滑動的小部件，這邊是單筆消費紀錄
  direction: DismissDirection.startToEnd, // 設定觸發事件的滑動方向，其他滑動方向則不會觸發任何事
  onDismissed: (direction) => removeExpenses(expenseData[i]), // 設置滑動後要執行的事件
)

在滑動觸發刪除消費紀錄事件後，產生已刪除的提示訊息，可用 `SnackBar` 小部件：

ScaffoldMessenger.of(context).clearSnackBars(); // 再產生新的 SnackBar 之前先清除舊的
ScaffoldMessenger.of(context).showSnackBar( // 顯示一個 SnackBar
  SnackBar( // 傳入 SnackBar 小部件
    content: Text('已刪除 ${expense.title} 消費。'), // 設置訊息內容
    duration: const Duration(seconds: 3), // 設置顯示時長，三秒後會自動消失
    action: SnackBarAction( // 設置按鈕
        label: '復原', // 按鈕名稱
        onPressed: () { // 點擊後執行的事件
          setState(() {
            expensesData.add(expense);
          });
        }),
  ),
);

## 自定義主題樣式

可設定使用 Material V3 版本的主題（默認是 V2 版本的主題，即主色為藍色的那種）

MaterialApp(
  theme: ThemeData(useMaterial3: true), // 在 MaterialApp 裏面添加這行設定
  home: const Expenses(),
),

可設置種子顏色去生成一組相關聯的顏色，以便用於應用程式的主題設置：

// 通過 ColorScheme.fromSeed 方法傳入 seedColor 為種子顏色進行生成
var kColorS = ColorScheme.fromSeed(
  seedColor: Colors.lightGreenAccent.shade100,
);

可通過在 `MaterialApp` 小部件中設定 `theme` 來客製化主題樣式：

MaterialApp(
  theme: ThemeData().copyWith( // 使用 ThemeData().copyWith 以保留預設的 Material 主題並加以改寫
    useMaterial3: true,
    colorScheme: kColorS, // 指定應用程式主題中的各種顏色為我們用種子顏色生成的顏色
    primaryColor: kColorS.primary, // 設置主題的主要顏色為種子顏色中的主要顏色
    appBarTheme: const AppBarTheme().copyWith( // 設置 appBar 小部件的主題(通過 .copyWith 保留預設的樣式)
      foregroundColor: kColorS.onPrimary, // 更改前景色
      backgroundColor: kColorS.primary, // 更改背景色
    ),
    cardTheme: const CardTheme().copyWith( // 設置 Card 小部件的主題(通過 .copyWith 保留預設的樣式)
      elevation: 0.5, // 更改陰影程度
      color: kColorS.secondaryContainer, // 設置背景色
    ),
    filledButtonTheme: FilledButtonThemeData( // 設置 FilledButton 小部件的主題
      style: FilledButton.styleFrom( // 通過 FilledButton.styleFrom 保留預設的樣式
        elevation: 1, // 更改陰影程度
        shadowColor: kColorS.background, // 更改陰影顏色
        backgroundColor: kColorS.primary, // 更改 fill 的顏色
      ),
    ),
    textTheme: ThemeData().textTheme.copyWith( // 設置所有文字相關小部件的主題(通過 .copyWith 保留預設的樣式)
          titleLarge: TextStyle(
            fontSize: 20,
            color: kColorS.primary,
            fontWeight: FontWeight.bold,
            height: 1,
          ),
          bodyLarge: TextStyle(
            fontSize: 16,
            color: kColorS.primary,
            height: 1,
          ),
          bodyMedium: TextStyle(
            color: kColorS.primary,
            height: 1,
          ),
          bodySmall: TextStyle(
            height: 1,
            color: kColorS.secondary,
          ),
        ),
  ),
  home: const Expenses(),
);

如果需要特別針對某個文字小部件選用文字主題可以這樣做：

Text(
  'Records',
  style: Theme.of(context).textTheme.titleLarge,
),

設置黑暗模式：

var kDarkColorS = ColorScheme.fromSeed( // 新增一個給黑暗模式用的種子顏色
  seedColor: const Color.fromARGB(255, 42, 96, 8),
  brightness: Brightness.dark, // 設定要生成深色主題用的顏色方案(默認是 Brightness.light)
);

MaterialApp(
  themeMode: ThemeMode.system, // 設置主題的模式為手機系統的模式(以哀鳳來說可在手機的設定中點擊開發者切換深色外觀)
  darkTheme: ThemeData.dark().copyWith( // 使用 ThemeData().dark().copyWith 以保留預設的 Material 的深色主題並加以改寫
    useMaterial3: true,
    colorScheme: kDarkColorS, // 指定應用程式主題中的各種顏色為我們用種子顏色生成的顏色
    primaryColor: kDarkColorS.primary, // 設置主題的主要顏色為種子顏色中的主要顏色
    scaffoldBackgroundColor: kDarkColorS.background, // 設置 Scaffold 小部件的背景色
    appBarTheme: const AppBarTheme().copyWith( // 設置 appBar 小部件的主題(通過 .copyWith 保留預設的樣式)
      foregroundColor: kDarkColorS.primary, // 更改前景色
      backgroundColor: kDarkColorS.onPrimary, // 更改背景色
    ),
    // ...後略
  ),
  home: const Expenses(),
)

在小部件中判斷當前的主題模式以顯示不同的顏色：

TextStyle(
  fontSize: 14,
  color: Theme.of(context).brightness == Brightness.dark
      ? kDarkColorS.onPrimaryContainer
      : const Color.fromARGB(255, 55, 55, 55),
);

## 顯示統計圖表的部分

在 `models/expense.dart` 檔案中添加設定 ExpenseBucket 的藍圖，用來獲取每個類別的數據：

class ExpenseBucket {
  ExpenseBucket(this.category, this.expenses);

  final Category category; // 傳入類別
  final List<Expense> expenses; // 傳入 Expense 的列表

  // 添加方法用來針對單個類別獲取數據
  ExpenseBucket.fromCategory(List<Expense> allExpense, this.category) 
      : expenses = allExpense
            .where((element) => element.category == category)
            .toList();

  // 添加獲取總金額的方法
  int get totalExpenses {
    int sum = 0;
    for (final e in expenses) {
      sum += e.price;
    }

    return sum;
  }
}

### 水平圖表作法

建立 `chart.dart` 檔案用來顯示統計圖表：

final List<Expense> expenses; // 傳入所有的 Expense 數據

List<ExpenseBucket> get allCategory { // 通過 get 方法獲取各個類別的 ExpenseBucket 數據並整合為 List
  return [
    ExpenseBucket.fromCategory(expenses, Category.food),
    ExpenseBucket.fromCategory(expenses, Category.learn),
    ExpenseBucket.fromCategory(expenses, Category.medical),
    ExpenseBucket.fromCategory(expenses, Category.shopping),
  ];
}

int total = 0; // 宣告一個變量用來存放總金額
for (var item in allCategory) { // 使用 for in 方法計算總金額
  total += item.totalExpenses; // 使用 ExpenseBucket 中的 totalExpenses 方法得到每個類別的總金額並進行加總
}

// 用 `Container` 小部件設置外觀
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Theme.of(context).brightness == Brightness.dark
        ? kDarkColorS.onPrimary
        : kColorS.secondaryContainer,
    border: Border.all(
      width: 1,
      color: Theme.of(context).brightness == Brightness.dark
          ? kDarkColorS.primary
          : kColorS.primary,
    ),
  ),
  padding: const EdgeInsets.symmetric(
    vertical: 8,
  ),
  child: Column( // 用 Column 小部件生成由上到下的排列
    children: [
      ...allCategory.map((e) => ChartBar(e, total, allCategory)), // 通過 map 方法產生各個分類的圖表小部件
    ],
  ),
);

新增自訂義的圖表小部件 `chart_bat.dart` ：

final ExpenseBucket item; // 各個分類的數據
final int total; // 總金額
final List<ExpenseBucket> allCategory; // 所有分類的 ExpenseBucket 列表

Row(
  children: [
    Column( // 用 Column 小部件顯示分類的 icon 與標題
      children: [
        Icon(
          cateIcon[item.category],
          size: 20,
          color: Theme.of(context).brightness == Brightness.dark
              ? kDarkColorS.primary
              : kColorS.onPrimaryContainer,
        ),
        const SizedBox(
          height: 4,
        ),
        Text(
          cateZhName[item.category]!,
          style: TextStyle(
            color: Theme.of(context).brightness == Brightness.dark
                ? kDarkColorS.primary
                : kColorS.onPrimaryContainer,
            fontSize: 12,
          ),
        )
      ],
    ),
    const SizedBox(
      width: 8,
    ),
    Expanded( // 用 Expanded 小部件確保圖表佔據最大可用寬度
      child: ClipRRect( // 用 ClipRRect 小部件設置圓角外觀
        borderRadius: BorderRadius.circular(4), 
        child: LinearProgressIndicator( // 用 LinearProgressIndicator 小部件生成百分比水平條狀圖
          value: (item.totalExpenses.toDouble() / total), // 設置填色區塊為 類別總金額➗總金額
          minHeight: 16, // 設置水平條狀圖的高度
          color: Theme.of(context).brightness == Brightness.dark // 設置填色區塊的顏色
              ? kDarkColorS.primary
              : kColorS.primary,
          backgroundColor: // 設置為填色區塊的背景色
              Theme.of(context).brightness == Brightness.dark
                  ? kDarkColorS.primaryContainer
                  : kColorS.primary.withOpacity(0.3),
        ),
      ),
    ),
  ],
);

最後可用 `Column` 小部件將整個 `Row` 小部件包起來，並在每個類別的 `Row` 下方新增分隔線小部件 `Divider`：

Column(
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 16,
      ),
      child: Row(
        children: [
          Column(
            // 顯示類別的 icon 與名稱
          ),
          const SizedBox(
            width: 8,
          ),
          Expanded(
            // 顯示水平條狀圖
          ),
        ],
      ),
    ),
    if (allCategory.last.category != item.category) // 判斷是否為最後一個分類，不是才顯示分隔線
      const Divider(), // 分隔線小部件
  ],
);

## 垂直圖表做法

將 `Chart.dart` 的 `Column` 改為 `Row`：

Row( // 用 Row 小部件生成由左到右的排列
  crossAxisAlignment: CrossAxisAlignment.end, // 設置內容對齊方式為垂直貼底
  children: [
    ...allCategory.map(
      (e) => Expanded( // 將 ChartBar 小部件用 Expanded 包住，以佔據所有空間
        child: ChartBar(e, total, maxTotal, allCategory),
      ),
    ),
  ],
),

將 `chart_bat.dart` 最外層的 `Row` 改為 `Column` ，讓類別名稱與填色區塊垂直排列，接著將原本用來設置 `LinearProgressIndicator` 小部件外觀圓角的 `ClipRRect` 小部件刪除，並將 `LinearProgressIndicator` 改為 `FractionallySizedBox` 小部件，整體內容如下：

final ExpenseBucket item; // 各個分類的數據
final int total; // 總金額
final int maxTotal; // 分類當中最高的金額

Column(
  mainAxisAlignment: MainAxisAlignment.end, // 設置讓條狀圖統一靠下
  children: [
    Column( // 用來在填色條狀上方顯示類別名稱/圖標/所佔據百分比
      children: [
        Icon( // 顯示類別 icon
          cateIcon[item.category],
          size: 20,
          color:
              isDarkMode ? kDarkColorS.primary : kColorS.onPrimaryContainer,
        ),
        const SizedBox(
          height: 4,
        ),
        Text( // 顯示類別名稱
          item.category.name.toUpperCase(),
          style: TextStyle(
            color: isDarkMode
                ? kDarkColorS.primary
                : kColorS.onPrimaryContainer,
            fontSize: 12,
            fontWeight: FontWeight.w500,
          ),
        ),
        const SizedBox(
          height: 4,
        ),
        Text( // 用總金額下去計算，顯示類別佔據的百分比
          '${(item.totalExpenses.toDouble() / total * 100).floor()}%',
          style: Theme.of(context)
              .textTheme
              .bodyMedium
              ?.copyWith(fontWeight: FontWeight.bold),
        )
      ],
    ),
    const SizedBox(
      height: 4,
    ),
    Flexible( // 使用 Flexible 將 FractionallySizedBox 小部件包住
      child: FractionallySizedBox( // 使用 FractionallySizedBox 小部件顯示填色條狀圖
        heightFactor: item.totalExpenses.toDouble() / maxTotal, // 要填色的高度
        child: Container( // 用 Container 小部件進行填色
          width: 24,
          margin: const EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.vertical(
              top: Radius.circular(4),
              bottom: Radius.circular(0),
            ),
            color: isDarkMode
                    ? kDarkColorS.onPrimaryContainer
                    : kColorS.primary,
          ),
        ),
      ),
    ),
  ],
);

## 響應式設計

獲取設備寬高的方式如下：

// 比如可判斷 width > 400 時顯示 Row 小部件、 width < 400 時顯示 Column 小部件
final width = MediaQuery.of(context).size.width;

// 比如可判斷 height > 400 時顯示 Column 小部件、 height < 400 時顯示 Row 小部件
final height = MediaQuery.of(context).size.height;

獲取小部件寬高的方式：

LayoutBuilder( // 使用 LayoutBuilder 小部件包住欲計算的小部件
  builder: (BuildContext context, BoxConstraints constraints) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 16,
        horizontal: 8,
      ),
      child: SizedBox(
        width: constraints.maxWidth * 0.55, // 通過 constraints.maxWidth 獲取寬度
        // constraints 共有 maxWidth/minWidth/maxHeight/minHeight 四種屬性值
        child: Column(
          children: [
            Text(
              'Records',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(
              height: 8,
            ),
            mainContent,
          ],
        ),
      ),
    ),
  },
);

判斷設備當前方向為直立或橫向：

final orientation = MediaQuery.of(context).orientation;

if (orientation == Orientation.portrait) // 直立
  Row(
    children: [
      Expanded(child: priceWidget), // 把消費價格的輸入框小部件設為 local variable 方便復用
      const SizedBox(width: 16),
      const Spacer()
    ],
  )
else // 橫向
  Row(
    children: [
      Expanded(child: titleWidget), // 把標題的輸入框小部件設為 local variable 方便復用
      const SizedBox(width: 16),
      SizedBox(width: 200, child: priceWidget), // 把消費價格的輸入框小部件設為 local variable 方便復用
    ],
  ),

## 自適應

安卓設備使用 `Material` 主題，蘋果設備使用 `Cupertino` 主題，比如 `showDialog` vs `showCupertinoDialog` ，可通過以下方式判斷設備：

if (Platform.isIOS) { // 判斷是否為 IOS 系統
  showCupertinoDialog(
    context: context,
    builder: (context) => CupertinoAlertDialog(
      title: const Text('格式錯誤'),
      content: const Text('請確保您輸入了有效的標題、消費價格、消費日期與消費類別。'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('確定'),
        )
      ],
    ),
  );
} else {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('格式錯誤'),
      content: const Text('請確保您輸入了有效的標題、消費價格、消費日期與消費類別。'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('確定'),
        )
      ],
    ),
  );
}