iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Mobile Development

Flutter 從零到實戰 - 30 天の學習筆記 系列

小弟對於 APP 開發抱持著高度興趣。
剛好借助這次鐵人賽的機會,來逼自己每天都必須努力的學習並整理有用的資訊給每位讀者 📖
同時也希望透過實戰來與大家一起變強 💪
敬請期待~

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文 團隊啾嚕咕嚕跳起來
DAY 11

[Day 11] 實戰新聞 APP - 登入/註冊畫面

今日目標 今天我們預計會完成 登入/註冊的頁面撰寫,明天我們再將實際的功能串上。樣式是出自於我們的設計稿。 今天會是超級大工程,篇幅也會比較長 XDD 不過...

2023-09-26 ‧ 由 Micro Jordan 分享
DAY 12

[Day 12] 實戰新聞 APP - 設定 Firebase Auth 與串接

昨天我們已經將登入與註冊頁面寫完拉,今天我們將要來實際的串接功能。我們會使用 Firebase 這個由 Google 所提供的強大服務來進行實作。 Fireb...

2023-09-27 ‧ 由 Micro Jordan 分享
DAY 13

[Day 13] 實戰新聞 APP - Google Sign In 實作

今天我們要來實際串接 Google 的第三方登入方式,不過在此之前我們有必要來重整一下我們的程式碼。 重整程式碼 我們在上一章節中,我們實作了「登入」與「註冊」...

2023-09-28 ‧ 由 Micro Jordan 分享
DAY 14

[Day 14] 實戰新聞 APP - 導覽列、主題與字體設定

今天我們將實作當使用者成功登入後看到的頁面。我們會實作一個底部導覽列進行頁面的切換。效果如下: 讓我們開始吧! 底部導覽列 Cupertino 提供了一個好用...

2023-09-29 ‧ 由 Micro Jordan 分享
DAY 15

[Day 15] 實戰新聞 APP - 滾動式widget (ListView 、GridView與 Sliver widget)

今天我們將從「探索頁面」開始做起,我們將使用到兩個於 Flutter 中很常被使用於顯示需滾動內容的 widget,也就是 ListView 與 GridVie...

2023-09-30 ‧ 由 Micro Jordan 分享
DAY 16

[Day 16] 實戰新聞 APP - 串接 API

今天我們將開始進行 API 串接,在開始講解之前請先開啟之前在 Day10 時建立的 api server。若你已將 server 部署至 vercel 上可以...

2023-10-01 ‧ 由 Micro Jordan 分享
DAY 17

[Day 17] 實戰新聞 APP - FutureBuilder 與 StreamBuilder

昨天我們把我們的探索頁面的樣貌做的差不多拉,不過 Flutter 提供了兩個強大的 widget FutureBuilder 與StreamBuilder 專門...

2023-10-02 ‧ 由 Micro Jordan 分享
DAY 18

[Day 18] 實戰新聞 APP - Custom Widget

寫到目前為止,我們一直都將一個畫面的內容寫在單一檔案中,也就是說頁面上看得到的 widget全都可以在 xxx_screen.dart 的程式碼中找到。 試想...

2023-10-03 ‧ 由 Micro Jordan 分享
DAY 19

[Day 19] 實戰新聞 APP - 無限捲軸

大家好,今天我們要完成主頁的新聞瀏覽頁面,並加上無限捲軸的實作。畫面會如下圖:不過為什麼我們需要無限捲軸呢?試想一下,假設我們有 100 篇的新聞資料,這些新聞...

2023-10-04 ‧ 由 Micro Jordan 分享
DAY 20

[Day20] 實戰新聞 APP - 使用彈出式視窗來顯示新聞吧 (CupertinoPopupSurface)

昨天我們終於把主頁的焦點新聞頁面給完成拉,不過目前這些新聞卡片都只能顯示片面的資訊,理論上應該要有個專門用來閱讀新聞的頁面,如下圖:在 Cupertino UI...

2023-10-05 ‧ 由 Micro Jordan 分享