# Flutter 實戰 Part I --- ppt QR code  --- 如果你使用的是firebase studio，且無法順利開啟模擬機，請試著使用以下指令 : 1. flutter clean 2. flutter pub get --- ## 目標 - 學會使用 Flutter 的基礎 Widget 排版 - 掌握 `StatefulWidget` 狀態管理 - 製作互動式個人介紹卡片 --- 請到此網址下載模板 https://github.com/teddywang0824/profile_todo/tree/teaching  ---- 目標 UI  --- ## Step 1: 建立基本排版 - 使用 `Card` 做名片樣式 - 使用 `Column`, `Text`, `Icon`, `Row` 等組件 - 利用 `CircleAvatar` 放置大頭照 ```dart Card( child: Column( children: [ CircleAvatar(), Text('王小明'), ... Divider(height: 30, thickness: 2), Row(children: [...]), ... ElevatedButton(), ], ), ); ``` --- ## Step 2: 加入樣式與排版美化 使用 padding, margin, SizedBox TextStyle 修改字型大小、粗細、顏色 --- ## Step 3: 加入互動功能（StatefulWidget） 將 ProfilePage 改為 StatefulWidget 增加一段個人狀態文字 加入按鈕點擊切換狀態 ```dart String statusMessage = '今天也要加油 !!'; void updateStatus() { setState(() { statusMessage = (statusMessage == '今天也要加油 !!') ? '我想我還是躺平好了...' : '今天也要加油 !!'; }); } ``` --- # What's Next ? ---- ## 儲存資料 ---- 兩個選擇 : 1. 本地儲存 2. 雲端儲存 ---- ### 本地儲存有哪些方法? 1. [shared_preferences](https://pub.dev/packages/shared_preferences) 2. [sqflite](https://pub.dev/packages/sqflite) 3. [path_provider](https://pub.dev/packages/path_provider) + [dart:io](https://api.flutter.dev/flutter/dart-io/) --- 回饋表單