iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Mobile Development

新手試試用Flutter做Netflix UI 系列

這個想法源自於我在學習Flutter的過程中,看到的一個影片。
One Day Builds: Netflix Clone Using Flutter
https://www.youtube.com/watch?v=qFGzT73bjQ8
也許我也可以來實踐看看,過程中到底需要怎麼做

鐵人鍊成 | 共 30 篇文章 | 15 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day21]Flutter Netflix UI 選擇使用者頁面的載入畫面

大家好,今天用的是FutureBuilder,通常我們使用的資料都是從雲端獲取數據,是一個異步任務,我們可以用FutureBuilder對這種異步更新UI...

2020-10-06 ‧ 由 IgnacioZhang 分享
DAY 22

[Day22]Flutter Netflix UI搜尋頁面之使用FadeInImage

大家好今天要用到StreamBuilder、FadeInImage.memoryNetwork 大部分的時候我們可能會用到一些網路上的圖片,之前我們使用的都是從...

2020-10-07 ‧ 由 IgnacioZhang 分享
DAY 23

[Day23]Flutter Netflix UI 使用Shimmer為首頁加個微光閃爍的載入畫面

大家好,今天我們還是想辦法來做一些載入時候的效果,今天我們使用的是Shimmer這是一個package,顯示的效果是微光閃過的感覺。 跟前面幾篇一樣我們使用一個...

2020-10-08 ‧ 由 IgnacioZhang 分享
DAY 24

[Day24]Flutter Netflix UI 不讓底部導航欄消失,嘗試用Navigator 2.0

大家好,今天更新了Flutter到1.22.1,它就發生錯誤了,主要是之前使用的custom_navigator package有些問題,剛好發佈了新的Navi...

2020-10-09 ‧ 由 IgnacioZhang 分享
DAY 25

[Day25] Flutter Netflix UI Internationalization國際化

大家好,今天我們要做的是多語言的部分,Internationalization可以讓這個App,呈現不同的語言今天主要參考這個文件的內容 開始,先在pubsp...

2020-10-10 ‧ 由 IgnacioZhang 分享
DAY 26

[Day26]Flutter Netflix UI ListView中第一個可見的Item顯示,其他都變暗

大家好,今天要做的是捕捉ListView裡面顯示在螢幕上的是哪一個Item,今天會用到NotificationListener、HitTestResult、Me...

2020-10-11 ‧ 由 IgnacioZhang 分享
DAY 27

[Day27]Flutter Netflix UI 使用json_serializable轉換Model

大家好,今天要來做Model的轉換,使用到json_serializable、build_runner 這是前面定義的User,包含name跟assetName...

2020-10-12 ‧ 由 IgnacioZhang 分享
DAY 28

[Day28]初探Firebase Cloud Messaging for Flutter

大家好,今天要來嘗試使用firebase_messaging,今天使用的是Android手機 首先到Firebase Console註冊一個帳號,並建一個Pro...

2020-10-13 ‧ 由 IgnacioZhang 分享
DAY 29

[Day29]Flutter Netflix UI 底部導航欄上的通知數量

大家好,上一篇我們成功在Android手機上接到通知,今天我們在底部導航欄上顯示通知 先設置一個變數 int notificationCount = 0;...

2020-10-14 ‧ 由 IgnacioZhang 分享
DAY 30

[Day30]Flutter Netflix UI 使用shared_preferences

大家好,今天是最後一天,今天跟大家介紹shared_preferences,可以把一些簡單的設定的東西存在裡面 在pubspec.yaml新增shared_pr...

2020-10-15 ‧ 由 IgnacioZhang 分享