iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 30
1
Mobile Development

iOS Developer Learning Flutter系列 第 30 篇

iOS Developer Learning Flutter. Lesson29 總複習

flutter ios mobile 精華 完賽
4698 瀏覽

  • 分享至 

  • xImage
    •  

好啦～
這一天總是要來的
幫大家摘要一下

⚠️⚠️⚠️就是跟以前不一樣的⚠️⚠️⚠️
☘️☘️☘️就是類似的或替代品☘️☘️☘️

Lesson 0 - 開場白

  • 就做個開場
  • 然後介紹了一些學習資源

Lesson 1 - 依然哈囉

  • 可以選擇用AS或VSCode
  • 要自己下載SDK⚠️⚠️⚠️
  • 環境建立的詳細步驟
  • 從AS就可以執行iOS模擬器了
  • 就算是接實機也可以hot reload⚠️⚠️⚠️

Lesson 2 - 第一印象

  • Flutter專案裡還是有iOS跟Android資料夾
  • 所以換icon基本上還是跟以前一樣的方法
  • 當然你想要兩個平台用不一樣的icon也可以
  • 也可以用flutter_launcher_icons方便替換
  • iOS還是用LaunchScreen.storyboard☘️☘️☘️
  • Android有分：
    launch screens(啟動頁)：等待Android初始化
    splash screens(閃屏頁)：等待Dart初始化

Lesson 3 - 頁面跳轉

  • Flutter裡的世界裡什麼都是Widget
    就先把它當成UIView吧☘️☘️☘️
  • 有分StatelessWidget 跟 StatefulWidget
    盡量少用StatefulWidget
    除非會根據User或API改變的畫面
  • 跟ViewController比較像的東西應該算是Scaffold☘️☘️☘️
  • Flutter畫面不能用拉的⚠️⚠️⚠️
  • 有一些部分(像是頁面跳轉)會根據不同的平台自動轉換行為
  • subview現在叫child/children☘️☘️☘️
  • 跳頁的語法也滿像的Navigator.push

Lesson 4 - 畫面佈局

  • 關於Layout我感覺：以前像是決定要把View放在哪裏, 現在像是要把畫布分割區塊⚠️⚠️⚠️
  • 很常用到Column/Row(就是UIStackView☘️☘️☘️)
  • Row是水平排列, Column是垂直排列
  • Expanded只能在Flex裡使用
  • 要把物件重疊就用Stack

Lesson 5 - 容器元件

  • 以前iOS沒有下面這些UI類別⚠️⚠️⚠️
  • Align讓子widget對齊特定位置(九宮格)
  • Padding讓子widget留邊距
  • DecoratedBox裝飾子widget, 背景色或實現一些以前要在UIView.layer陰影/邊線/圓角做的事☘️☘️☘️
  • SizedBox指定子widget大小
  • Container是綜合上述多功能的Widget, 有時候直接用Container省得改來改去

Lesson 6 - 文字顯示與輸入

  • Text不是String是UILable⚠️⚠️⚠️
  • Text預設會自動折行, 不用怕忘記改行數了⚠️⚠️⚠️
  • TextField要透過controller物件才能控制它⚠️⚠️⚠️
Android iOS Flutter
TextView UILabel Text
EditText UITextField TextField

Lesson 7 - 按鈕與對話方塊

  • 按鈕透過onPressed callback來處理點擊事件
  • onPressed為null按鈕就會強制變成disable
  • 以前我們在用的UIControl都可以在這裡找到
  • Alert要自己呼叫Navigator.pop才會關掉⚠️⚠️⚠️
  • 使用async/await才能取得Alert的結果
Android iOS Flutter
Button UIButton RawMaterialButton
Dialog UIAlertController AlertDialog

Lesson 8 - 圖片

  • UIImageView就是Image, UIImage就是ImageProvider☘️☘️☘️
  • 使用圖片路徑跟副檔名都要⚠️⚠️⚠️
  • 內建讀取網路圖片功能⚠️⚠️⚠️
Android iOS Flutter
ImageView UIImageView Image
Bitmap UIImage ImageProvider
ScaleType UIViewContentMode BoxFit

Lesson 9 - 選擇器

Yes

  • 注意showBottomSheet跟showModalBottomSheet是兩個不一樣的方法
Android iOS Flutter(Material) Flutter(Cupertino)
Spinner UIPickerView showBottomSheet CupertinoActionSheet
DatePickerDialog UIDatePicker showDatePicker/showTimePicker CupertinoDatePicker

Lesson 10 - 建立列表

  • TableView叫List☘️☘️☘️
  • cell叫ListTile☘️☘️☘️
  • 可以橫的⚠️⚠️⚠️
  • 也是要靠scrollController
  • 有children(一次全建) 跟 builder(要顯示才建立)兩種建立方式
Android iOS Flutter
ListView UITableView static cell ListView use children
RecycleView UITableView dynamic cell ListView.builder

Lesson 11 - 列表置頂與刷新

  • 沒有section的概念⚠️⚠️⚠️
  • 置頂header使用sticky_headers套件

Lesson 12 - 列表輸入與折疊

  • children方式建立的ListView其TextField上的資料還是會跑掉
  • 用ExpansionTile就可以做到folding效果

Lesson 13 - 列表多選與側滑

  • 要做多選會用CheckboxListTile
  • 側滑選項的話使用flutter_slidable
  • 簡單提示訊息可以用SnackBar

Lesson 14 - 網格

  • 直接幫你算好cell大小(爽爽的)⚠️⚠️⚠️
  • 但是不能paging scroll⚠️⚠️⚠️
Android iOS Flutter
RecycleView(set GridLayoutManager) UICollectionView GridView

Lesson 15 - 特製滾動

  • CustomScrollView就像CompositionalLayout☘️☘️☘️
  • CustomScrollView裡面一定要用Sliver Widget
  • CupertinoSliverRefreshControl就是在CustomScrollView使用

Lesson 16 - 底部導航與頁籤

  • BottomNavigationBar這個是TabBar☘️☘️☘️
  • TabController這個不是TabBar...在iOS我不知道叫什麼, 就是那個可以用手勢換頁的
  • BottomNavigationBar有分fixed 跟 shifting兩種Type
  • 注意BottomNavigation超過三個就會轉成shifting
  • BottomNavigation的換頁必須自己管理
Android iOS Flutter
BottomNavigationView UITabBarController BottomNavigationBar
TabbedActivity 看套件叫什麼它就叫什麼 TabController

Lesson 17 - API GET

  • 唔...這天沒什麼重點XD, 就介紹一下怎麼轉Model跟打API

Lesson 18 -API POST

  • Flutter內建的HttpClient功能比較陽春, POST好像只支援application/json
  • 完整一點的可以使用官方出的套件http
  • 或是第三方的Dio

Lesson 19 - Life Cycle


![][https://i.imgur.com/lCg6cWh.gif]

  • Widget生命週期跟iOS/Android不太一樣, 沒有will/did相關的
  • App生命週期要widget透過WidgetsBindingObserver自己監聽
iOS Android Flutter
init onCreate createState
viewDidLoad initState
viewWillAppear onStart 這個沒有真的滿傷的⚠️⚠️⚠️
viewDidLayoutSubviews build
viewDidAppear onResume
viewWillDisappear onPause
viewDidDisappear onStop
removeFromSuperview deactivate
deinit onDestroy dispose
WillEnterForeground onRestart
DidBecomeActive onStart resumed
WillResignActive onPause 這個沒有對金融業也滿傷的⚠️⚠️⚠️
DidEnterBackground onStop paused

Lesson 20 -InheritedWidget

  • UI樹一層包一層, 若底層的widget若想取得上層的state會很麻煩
  • InheritedWidget讓底層widget可以方便取得上層的state
  • 類似Singleton的作用☘️☘️☘️
  • InheritedWidget更新了就會呼叫didChangeDependencies

Lesson 21 -Provider

  • 就是進階版的InheritedWidget套件
  • 可以做到以前NotificationCenter的效果☘️☘️☘️
  • 如果要做到push到2ndVC時TabBar還在
    就要Scaffold/TabBar/TabView整套換成Cupertino
  • 如果要做到push到2ndVC時點TabBarItem可以popToRootVC
    就要用navigatorKey去找到navigator再去popUntil

Lesson 22 - Notification

  • 也是類似NotificationCenter☘️☘️☘️
  • 只是現在方向由下往上
  • 畫這個金字塔比實作Notification麻煩XD

Lesson 23 - ImagePicker

  • 要另外裝image_picker
  • 取得path之後, 透過path拿到File, 再用Image.file顯示

Lesson 24 - Local Storage + URL Launcher

Yes

  • SharedPreferences就是UserDefault☘️☘️☘️
  • url_launcher就像openURL☘️☘️☘️
  • 不過開網頁不是外開Safari了, 而是使用SFSafariViewController⚠️⚠️⚠️

Lesson 25 - Push Notification

  • 多圖詳細設定步驟
  • 現在憑證都用.p8了

Lesson 26 - Biometric

Yes

  • 使用local_auth
  • 不會拿到拒絕原因(LAError)⚠️⚠️⚠️

Lesson 27 - Map + Location

  • 要用Google Maps要先去CGP上面申請API Key
  • 有提供my location button
  • 要注意要求定位權限的時機要晚一點, 才不會卡在過場動畫

Lesson 28 - flutter_turtle

  • 體驗Zonble大大有趣的side project
  • 詳細介紹可以看看他本人寫的這篇Medium

結語

  • 超級推薦《Flutter實戰》這本電子書
    又詳細又豐富
  • 手機跨平台討論群(LINE)
  • 對Android有興趣的朋友可以右轉iOS Developer Learning Android
  • 官網簡中版有中英對照
  • Flutter寫起來真的爽度滿高的
    感覺code都輕量化了
    不用在那邊拉來拉去了
    邊寫邊hot reload也很方便
  • 不過要用在正式產品上還是會怕怕的, 尤其是金流/影音類
  • 可是要是團隊要推, 我會很樂意使用
  • 萬物皆Widget
  • Widget真的超多種的(300多種)
    不過也代表很多東西不用自己刻了
  • 超容易寫出波動拳的
    可以參考一下這篇看看人家推薦怎麼寫
  • 要加;號結尾喔～
  • Cupertino就是iOS風格的意思
  • 使用declarative(聲明式) UI
  • FWW - Google每週一分鐘介紹一個Widget
  • Flutter有自己的套件網站
  • 有一些部分(像是頁面跳轉)會根據不同的平台自動轉換行為
  • 關於Layout我感覺：以前像是決定要把View放在哪裏, 現在像是要把畫布分割區塊⚠️⚠️⚠️
  • enum竟然不能直接用 .xxx 賦值⚠️⚠️⚠️
  • Widget本身沒有backgroundColor屬性
  • Text不是String是UILable⚠️⚠️⚠️
  • 跟js一樣使用async/await
  • 推薦這個開源的App
  • 推薦老孟的Widget大全
  • 今年的iPlayground研討會，小弟有幸分享上台「iOS、Android、Flutter超級比一比」主題
    有興趣的可以參考一下

上一篇
iOS Developer Learning Flutter. Lesson28 打包上架
系列文
iOS Developer Learning Flutter 共 30 篇
  1. 26
    iOS Developer Learning Flutter. Lesson25 Push Notification
  2. 27
    iOS Developer Learning Flutter. Lesson26 Biometric
  3. 28
    iOS Developer Learning Flutter. Lesson27 Map + Location
  4. 29
    iOS Developer Learning Flutter. Lesson28 打包上架
  5. 30
    iOS Developer Learning Flutter. Lesson29 總複習
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
ytyubox
iT邦新手 5 級 ‧ 2020-10-15 11:32:27

恭喜完賽～

MarkFly～ iT邦新手 4 級 ‧ 2020-10-15 17:06:12 檢舉

謝謝～

登入發表回應
0
Jason Hung
iT邦研究生 5 級 ‧ 2020-10-15 13:07:59

恭喜完賽，這篇總複習好讚～

MarkFly～ iT邦新手 4 級 ‧ 2020-10-15 16:54:50 檢舉

/images/emoticon/emoticon12.gif

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙