iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
0
Mobile Development

用 Flutter 開發一個 Android App 吧系列 第 7

用 Flutter 開發一個 Android App 吧 - Day 7. 頁面刷新、修一些 Bug

本系列同步發表在 個人部落格,歡迎大家關注~

頁面刷新(Page Refresh) 和 StatefulWidget

今天來完成一下頁面刷新的部份,先拿 Day 5 完成的倉庫頁(RepoPage)來作些改變。

day7-1.png

首先把原本得 Container 替換成 RefreshIndicator 這個 Widget,而使用RefreshIndicator 有一個一定要填入的屬性 onRefresh

onRefresh 中,我們簡單的在先前宣告的 repoList 變數加上新的值,模擬頁面刷新時有新的資料加入。

但事情總不像我這憨人想像的如此容易...

day7-2.gif

問題出在哪呢? 我們可以把一些東西 print 出來看看

day7-3.jpeg

咦,在 Debug Console 中,我們卻實實在在地看到 repoList 裡有新增 {"title": "BbsonLin/new-item", "description": "", "lang": ""} 阿,這是怎回事呢?

原來,只是 Flutter 並不知道你的 repoList 要立即對應、更新你的頁面(因為我們這還是用 StatelessWidget...),那麼要怎樣作才能讓 Flutter 達成這效果呢?

沒錯,聰明的同學一下就知道還有 StatefulWidget 的存在。
下面我們就著手把 StatelessWidget 變成 StatefulWidget 吧~

小提醒:

如果是使用 VSCode 作開發的話在 class 上方會出現燈泡點選之後,選擇 Convert to StatefulWidget,可以快速的變成 StatefulWidget 的形式喔。

day7-4.png

這方式節省非常多時間,也是為何我都會從 StatelessWidget 起手的原因。

day7-5.jpeg

變成 StatefulWidget 後有另一個重點,就是要使用 setState 這個函數,要變換的狀態必須要在這函數裡面才行。

--

欸!? 修一些 Bug 吧

對,沒錯,我想有些人看出不少的小問題

所以這邊我想暫停一下,花一些篇幅來作 Fix bug 和 Enhancement

這邊只敘述修改的項目和我找到哪些參考來解決他們,詳細的程式碼都可以 點選圖片連結觀看 喔~

  1. 首頁的重構(Home Page - Refactor)

    修改的項目:

    • 一堆的 ListTile 改用 ListTile.divideTiles 取代
    • 加入頁面刷新
    • 改成 StatefulWidget

    day7-6.jpeg

  2. Main Page - Scrollbar

    用 Flutter 內建的 Scrollbar Widget,滿簡單使用的,詳細可以參看文件。

  3. Main Page - Circle Avatar Button

    在主畫面的左上按鈕,UI 設計中為頭像按鈕,於是我另外創建了 CircleAvatarButton ,基本上就是將 IconButton中的 icon 換成 CircleAvatar

小提醒:

--

今日成果

day7-7.gif

參考


上一篇
用 Flutter 開發一個 Android App 吧 - Day 6. 導覽選單、搜尋頁
下一篇
用 Flutter 開發一個 Android App 吧 - Day 8. 再修 Bug、個人頁面
系列文
用 Flutter 開發一個 Android App 吧30

尚未有邦友留言

立即登入留言