flutter小白是如何在一週內用chatGPT開發一款App的
2023-07-07 12:01:10
創作初衷
這篇文章創作的初衷，只是為了寫一個有關日曆類的軟體供自己使用，考慮到自己從來還沒有使用flutter正式創作一個app，因此磨刀霍霍想試一試。
至於為什麼要做一款日曆軟體，因為發現市面上的關於萬年曆的軟體都有很多廣告，想著自己也能做，就做個給自己用。同時裡面包含了額外的模組，包括萬年曆、天氣以及小常識等等。。。
說（遇）說（到）重（的）點（坑）
幾個重要的庫或選擇
至於為什麼這麼選擇？我都是在chatGPT中問出來的，畢竟小白首先得知道方向在哪裡，然後根據給出的提示去官方檔案進行比較。
比如在選擇使用哪個天氣時，我首先從chatGPT給我的推薦中去官網檢視，看是否能夠滿足我的需求
- 免費API (或者說呼叫次數在多少次內免費)
- 是否提供當天的詳細天氣情況
- 是否提供一天24小時的天氣走勢
- 是否提供7天之內的詳細情況
經過比較之後，我發現上述的都不是特別合適，基本上提供7天以上的就不能免費訂閱了，所以在此基礎上，我就會再加上一些關鍵詞，比如 "免費API", "7天天氣詳情"等等。
底部導航欄動畫
原本採用的是flutter預設提供的導航欄，後來想想怎麼也的折騰一番。但是這一折騰不打緊，導致我後面路由的設計全改變了。
頁面有4個導航tab，所以我最開始採用了4個路由，分別對應4個tab
class Routes {
static String calendar = "/calendar";
static String weather = "/weather";
static String sense = "/sense";
static String settings = "/settings";
// ...
}
這樣安於現狀老老實實切換是木有問題的，但是我想在切換的時候加點動畫，類似與這樣的，就不work了：
原因是這個元件在路由切換的時候，都會重新渲染一份，所以動畫肯定是沒有的，無奈之下，就提取了一個公共頁，採用分支邏輯hide/show，來做tab頁面的切換
Scaffold(
appBar: getAppBar(selectedIndex, context),
body: getBody(selectedIndex, senseState),
bottomNavigationBar: renderBottomNavigationBar(
context,
selectedIndex,
(index) {
setState(() {
selectedIndex = index;
});
},
),
floatingActionButton: getFloatingActionButton(selectedIndex, homeState),
);
Widget getBody(int index, SenseState senseState) {
switch (index) {
case 0:
return const Calendar();
case 1:
return const Weather();
case 2:
return CommonSense(senseState: senseState);
case 3:
return const Settings();
default:
return const Calendar();
}
}
資料預載入
我做的這個demo裡面，由於需要展示天氣資訊，所以在顯示日曆的時候，就可以進行天氣資訊的預載入了。
我的具體做法是在main.dart中，在weatherState初始化後就立即將天氣資訊獲取然後塞入state中，這樣在我切換到天氣頁面的時候，就可以獲取到詳細的資料了。【可能有更加好的辦法