iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
2
Mobile Development

Flutter 程式設計入門實戰 30 天系列 第 1

Day 1:為什麼要用 Flutter ?

本篇文章同步發表在 HKT 線上教室 部落格,線上影音教學課程已上架至 Udemy-HKT線上教室。想追蹤更多相關技術資訊,歡迎到 臉書粉絲專頁 按讚追蹤喔~

前言

哈囉~大家好,我是 KT ,因緣際會 KT 報名參加第11屆【iT邦幫忙鐵人賽】Mobile Development 行動開發組,挑戰連續30天發表技術文章不中斷,從 2019/9/16 到 2019/10/16。KT 的題目是 「Flutter 程式設計入門實戰 30 天」,每天將介紹如何使用基本 Flutter 元件來開發 Android 和 iOS 雙平台的 APP 行動應用程式。

目前預計 30 天準備挑戰的規劃內容:

Go 準備開始

Day 1:為什麼要用 Flutter ?
Day 2:安裝 Flutter 開發環境
Day 3:建立第一個 Flutter 應用程式專案
Day 4:第一支 Flutter 應用程式,Hello World
Day 5:起手式程式碼

基礎容器元件

Day 6:Container 大大容器
Day 7:水平 Row 和垂直 Column 容器
Day 8:Center 置中容器

基本常用元件

Day 9:Text 文字標籤元件
Day 10:Button 按鈕元件
Day 11:Image 圖片元件
Day 12:TextField 文字輸入框元件

跳頁&資料傳遞介紹

Day 13:簡單跳頁
Day 14:從A頁跳到B頁,並傳遞資料
Day 15:從B頁返回A頁,並傳回資料
Day 16:傳遞整包資料

按鈕和提示元件

Day 17:FloatingActionButton 漂浮按鈕
Day 18:SnackBar 提示元件
Day 19:對話框視窗

頁面導航元件

Day 20:BottomNavigationBar 底部頁面導航元件
Day 21:TabBar 選項卡頁面導航元件
Day 22:Drawer 抽屜頁面導航元件

進階容器佈局元件

Day 23:Stack 堆疊元件

列表佈局相關元件

Day 24:ListView 列表元件
Day 25:GridView 網格元件
Day 26:Table 表格元件

資料儲存

Day 27:SharedPreferences 資料存取
Day 28:Sqflite 資料庫存取
Day 29:Provider 狀態管理

總結

Day 30:最後一天

今天【iT邦幫忙鐵人賽】挑戰第一天,KT 將為大家來介紹,為什麼要用 Flutter ?

為什麼要用 Flutter ?

Flutter 是由 Google 主導的 Dart 程式語言研發出來的開源跨平台軟體框架 (Framework),亦即是說可以寫一套程式碼在多個作業平台上運行。其實單一套程式可以同時運行在目前最火紅的雙行動平台 Android 和 iOS 上,KT 認為就是一件很值得投資學習的程式語言。

不僅如此 Flutter 有相當高的效率 120FPS 的渲染性能,豐富的UI元件,媲美 Native 原生效能體驗。如果想更詳細了解 Flutter 為什麼性能優勝於其他跨平台程式語言如:Reactive、PhoneGap 可以參考篇文章: 「What’s Revolutionary about Flutter」,這邊 KT 快速簡單扼要的說明 Flutter 革命性的變化,就是將 Widget 拉到 SDK 這一層,透過 Dart 虛擬機器,不用還要透過中間層 Bridge 轉換才能繪製出,如:按鈕、文字框…等畫面,大幅提升運行效能。

平台原生程式語言 Native Code

原生語言運行效能最好,但每個平台皆需各維護一套程式語言。不能說寫好一套程式,每個平台同時共用,需要各平台各造同樣的輪子。 Flutter 就是要解決這個痛處並改善 PhoneGap 和 Reactive 運行效能的問題。

Reactive

圖中 Bridge 指的是 Reactive SDK,因為要透過 Bridge 來跟平台溝通導致整體運行效能上較差。

Flutter

Flutter 革命性的變化,就是將 Widget 拉到 SDK 這一層,透過 Dart 虛擬機器,不用還要透過 Bridge 轉換才能繪製出,按鈕、文字框...等畫面,大幅提升運行效能。

Flutter 框架架構

如果覺得上面幾張圖的介紹與描述,還不夠力道說明 Flutter 性能,心裏覺得還是不踏實,想知道 Reactive 和 Flutter 實際在 iPhone 和 Android 手機上運行比較,可以參考阿里巴巴旗下的閒魚交易平台所寫的這篇文章:「流言終結者 - Flutter 和 RN 誰才是更好的跨端開發方案?」

Flutter 學習資源

珍藏撇步,不私藏,分享一下 KT 怎麼學習 Flutter , KT 滿常在這幾個地方晃,來學習如何開發 Flutter 應用程式。

Flutter 官網文件說明書 (英文)
https://flutter.dev/docs

Flutter 官網文件說明書 (簡體中文)
https://flutter.cn/docs

Twitter (搜尋 flutterdev 的 tag 標籤)
https://twitter.com/search?q=flutterdev

Medium (搜尋 flutter)
https://medium.com/search?q=flutter

掘金 (搜尋 flutter 的 tag 標籤)
https://juejin.im/tag/Flutter

Flutter Awesome
https://flutterawesome.com/

Flutter Taiwan 臉書粉絲團
https://www.facebook.com/groups/flutter.tw/

Dart 程式語言

Flutter 主要是使用 Dart 程式語言編寫出來的框架,KT 怕有些同學與小夥伴們想使用 Flutter 來開發手機 APP 應用程式,卻因為不認識 Dart 程式語言,而卡關望之卻步,KT 這邊貼心的附上,在部落格發表的「Dart 程式語言入門」講義,想進一步了解,可以參考以下相關資料:

Go 準備開始

No. 課程名稱 講義
1 安裝 Dart 開發環境 連結
2 建立第一個 Dart 專案 連結

Basic 基礎語法

No. 課程名稱 講義
1 單行、多行註解程式 連結
2 變數與常數 連結
3 數字與邏輯資料型態 連結
4 字串資料型態 連結
5 運算符號 連結

集合資料型態

No. 課程名稱 講義
1 List 集合資料型態 連結
2 Map 集合資料型態 連結

Condition 條件控制

No. 課程名稱 講義
1 if 條件控制 連結
2 switch 條件控制 連結

Loop 循環控制

No. 課程名稱 講義
1 for 循環控制 連結
2 while 循環控制 連結
3 跳轉語句: break、continue、return 連結

Method 方法

No. 課程名稱 講義
1 方法 連結

OOP 物件導向

No. 課程名稱 講義
1 類別 連結
2 繼承 連結
3 抽象 連結
4 介面 連結
5 套件 連結

著作聲明

「Flutter 程式設計入門實戰 30 天」中提供所有的圖文與程式碼,以下簡稱「本資料」。「本資料」,允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須註明出處。「本資料」由 HKT (侯光燦) 編輯著作。

商標內容聲明

「本資料」,其中所引用之各商標及產品名稱分屬其合法公司所有,「本資料」,部分採用開放源始碼、圖文與影音等多媒體,引用自於網路,皆屬於其原作者之所有,「本資料」引用純屬介紹之用,並無任何侵權之意,特此聲明,其中內容若有不妥,或是侵犯了您的合法權益,請麻煩通知我們,我們將會迅速協助將侵權的部分移除,謝謝!

*若有任何問題,麻煩來信「thishkt@gmail.com」聯繫,謝謝。


那今天【iT邦幫忙鐵人賽】就介紹到這邊囉~

順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

從零開始學 Dart 程式設計
https://tw-hkt.blogspot.com/2019/08/2019-dart-83.html

Background vector created by freepik
https://www.freepik.com

Flutter 官網
https://flutter.dev/docs

What’s Revolutionary about Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

流言終結者 - Flutter 和 RN 誰才是更好的跨端開發方案?
https://www.yuque.com/xytech/flutter/gs3pnk


下一篇
Day 2:安裝 Flutter 開發環境
系列文
Flutter 程式設計入門實戰 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0

嗨嗨你好,請問這邊 Reactive 說的是 React Native 嗎?

0

嗨嗨你好,請問這邊 Reactive 說的是 React Native 嗎?

我要留言

立即登入留言