iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

使用flutter建構Android和iOs APP 系列

我是一個網頁前端工程師,一直很想要寫APP,Survey過Cordova.React Native以及Weex,最後決定用用看Google最新出的Flutter框架,因為可以不用寫太多樣式、編譯的速度快、經國外講師Maximilian Schwarzmüller介紹得知他也有不錯的效能,於是想要好好來鑽研,開發出一個有產品列表、登入、討論區、購物車等等功能的APP。

參賽天數 23 天 | 共 25 篇文章 | 27 人訂閱 訂閱系列文 RSS系列文
DAY 1

Flutter跳坑開始

嗨大家好我是Jerry,是一個工作剛滿一年的網頁前端工程師,這次主要要跳坑寫Flutter的主要原因,是因為我一直很想寫APP,但React Native常常編...

2018-10-01 ‧ 由 Jerry 分享
DAY 2

關於組件

主要的畫面呈現都是lib的main.dart所編譯的結果,所以直接進入此檔案來了解運行原理吧 定義了main這個function,flutter就知道要從何開...

2018-10-02 ‧ 由 Jerry 分享
DAY 3

使用陣列的map方法去跑卡片清單

介紹陣列前,先提供個資源:官網的組件清單https://flutter.io/widgets/material/ 增加一個按鈕與外距 b...

2018-10-03 ‧ 由 Jerry 分享
DAY 4

規劃檔案結構與state1 - main和product_manager

接下來,為了讓code不要太長,決定來切分檔案架構,會新增這些檔案 lib - main.dart - product_control.dart - produ...

2018-10-04 ‧ 由 Jerry 分享
DAY 5

規劃檔案結構與state2 - product_control和products

繼續沿用前一天的標頭 lib - main.dart - product_control.dart - product_manager.dart - produ...

2018-10-05 ‧ 由 Jerry 分享
DAY 6

導覽列

開始增加商品列表之外的其他頁面 lib - pages - home.dart - product.dart - main.dart - pro...

2018-10-06 ‧ 由 Jerry 分享
DAY 7

Map資料格式(很像JS的Object)

目前架構變成這樣 product_control.dart的按鈕點擊事件變成這樣,傳入一個Map物件 onPressed: () { addProd...

2018-10-07 ‧ 由 Jerry 分享
DAY 8

刪除商品

一樣的檔案架構 希望的流程是,進入商品細節頁面,然後按刪除,就回到商品列表,並把該商品刪除如此gif pages/product.dart 刪除按鈕按下時,傳...

2018-10-08 ‧ 由 Jerry 分享
DAY 9

按上一頁時,不要刪掉商品

如此gif 按上一頁時不要刪掉商品pages/product.dart的build生命週期中,return一個WillPopScope組件,child是呈現畫...

2018-10-09 ‧ 由 Jerry 分享
DAY 10

收合式選單

pages/products.dart 如此gif Widget build(BuildContext context) { return Scaf...

2018-10-10 ‧ 由 Jerry 分享