iT邦幫忙

鐵人檔案

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

新手試試用Flutter做Netflix UI 系列

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

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

[Day1]建立Flutter專案製作第一個啟動頁面吧!

大家好,我叫Ignacio!原本是機械工程學系的學生因為對軟體有興趣所以開始接觸App開發。從接觸Flutter到現在有一年了,希望跟大家分享我的學習一些經歷,...

2020-09-16 ‧ 由 IgnacioZhang 分享
DAY 2

[Day2]Flutter使用AnimatedContainer顯示啟動畫面

大家好,前一篇文章我們已經可以顯示圖片了。Flutter中的動畫方式有很多,今天我準備用AnimatedContainer來讓它改變透明度以及大小。 根據官方...

2020-09-17 ‧ 由 IgnacioZhang 分享
DAY 3

[Day3]Flutter使用Column以及Row初步建立主頁面之推薦區

承續前一文,我們已經經過啟動頁要進入主頁面了(登入頁面也許之後有空再做)!先來看看我們要做到什麼樣的效果吧!根據我的使用體驗,我把主頁面分成以下幾個區塊:上下...

2020-09-18 ‧ 由 IgnacioZhang 分享
DAY 4

[Day4]Flutter 用ListView做Netflix推薦影片List

今天我們將要做推薦影片List,我們會用到ListView、Ink、InkWell、SingleChildScrollView、BoxDecoration。當然...

2020-09-19 ‧ 由 IgnacioZhang 分享
DAY 5

[Day5]Flutter UI做Netflix排行榜前10名

今天我們來做排行榜前10名的UI,主要跟前面不一樣用到的有ClipRRect、Transform.translate、TextStyle、Shadow我們先沿用...

2020-09-20 ‧ 由 IgnacioZhang 分享
DAY 6

[Day6]Flutter Netflix UI之精彩預覽

今天我們要繼續做的是精彩預覽的部分,一樣使用到Ink、InkWell、BoxDecoration一樣沿用前面的列表code,今天主要更改外觀變成圓形 先來看看I...

2020-09-21 ‧ 由 IgnacioZhang 分享
DAY 7

[Day7]Flutter Netflix UI之搜尋欄以及熱門搜尋

今天要做搜尋欄以及熱門搜尋頁面,與前幾篇不一樣的有Card、SafeArea、ListTile、TextField、ListView.builder 用List...

2020-09-22 ‧ 由 IgnacioZhang 分享
DAY 8

[Day8]Flutter Netflix UI 底部導航欄

今天要做底部導航欄,用到CupertinoTabBar、BottomNavigationBarItem Flutter中的Scaffolds可以直接設置導航欄,...

2020-09-23 ‧ 由 IgnacioZhang 分享
DAY 9

[Day9]Flutter Netflix UI 跳轉頁面如何讓底部導航欄不消失

大家好,今天本來要做Series Detail的頁面,但這邊遇到跳轉頁面的時候會讓底部導航欄消失,所以今天先來解決這個問題。今天也是第一次,這個專案要加入plu...

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

[Day10]Flutter Netflix UI Detail頁面之劇集描述

大家好,今天我們要來繼續做Detail頁面的UI,之前跟前面幾篇用到比較不同的有BackdropFilter、ImageFilter.blur、AspectRa...

2020-09-25 ‧ 由 IgnacioZhang 分享