系列文章
[Day 11] 實戰新聞 APP - 登入/註冊畫面
今日目標 今天我們預計會完成 登入/註冊的頁面撰寫，明天我們再將實際的功能串上。樣式是出自於我們的設計稿。 今天會是超級大工程，篇幅也會比較長 XDD 不過...
[Day 12] 實戰新聞 APP - 設定 Firebase Auth 與串接
昨天我們已經將登入與註冊頁面寫完拉，今天我們將要來實際的串接功能。我們會使用 Firebase 這個由 Google 所提供的強大服務來進行實作。 Fireb...
[Day 13] 實戰新聞 APP - Google Sign In 實作
今天我們要來實際串接 Google 的第三方登入方式，不過在此之前我們有必要來重整一下我們的程式碼。 重整程式碼 我們在上一章節中，我們實作了「登入」與「註冊」...
[Day 14] 實戰新聞 APP - 導覽列、主題與字體設定
今天我們將實作當使用者成功登入後看到的頁面。我們會實作一個底部導覽列進行頁面的切換。效果如下： 讓我們開始吧！ 底部導覽列 Cupertino 提供了一個好用...
[Day 15] 實戰新聞 APP - 滾動式widget (ListView 、GridView與 Sliver widget)
今天我們將從「探索頁面」開始做起，我們將使用到兩個於 Flutter 中很常被使用於顯示需滾動內容的 widget，也就是 ListView 與 GridVie...
[Day 16] 實戰新聞 APP - 串接 API
今天我們將開始進行 API 串接，在開始講解之前請先開啟之前在 Day10 時建立的 api server。若你已將 server 部署至 vercel 上可以...
[Day 17] 實戰新聞 APP - FutureBuilder 與 StreamBuilder
昨天我們把我們的探索頁面的樣貌做的差不多拉，不過 Flutter 提供了兩個強大的 widget FutureBuilder 與StreamBuilder 專門...
[Day 18] 實戰新聞 APP - Custom Widget
寫到目前為止，我們一直都將一個畫面的內容寫在單一檔案中，也就是說頁面上看得到的 widget全都可以在 xxx_screen.dart 的程式碼中找到。 試想...
[Day 19] 實戰新聞 APP - 無限捲軸
大家好，今天我們要完成主頁的新聞瀏覽頁面，並加上無限捲軸的實作。畫面會如下圖：不過為什麼我們需要無限捲軸呢？試想一下，假設我們有 100 篇的新聞資料，這些新聞...
[Day20] 實戰新聞 APP - 使用彈出式視窗來顯示新聞吧 (CupertinoPopupSurface)
昨天我們終於把主頁的焦點新聞頁面給完成拉，不過目前這些新聞卡片都只能顯示片面的資訊，理論上應該要有個專門用來閱讀新聞的頁面，如下圖：在 Cupertino UI...