零Flutter基礎，四天完成Flutter簡版玩Android客戶端開發攻略
身為android開發者，在這幾天深深感到flutter容易上手的特性，尤其是dart，稍微瞭解下基本語法，就能直接寫，爽的一批~
廢話少說，先看成果
image.png
Day0 環境搭建
環境搭建很簡單，就是下個 Flutter SDK，然後設定設定環境變數什麼的就差不多了，我這裡是按照 Flutter 中文網教程搭建，沒遇到問題。附上地址： https://flutterchina.club/get-started/install/
Day1 dart語法學習 + Flutter基本開發瞭解
dart 基本語法學習，看這裡即可 https://book.flutterchina.club/chapter1/dart.html
有 Java 開發基礎，花半小時瞭解 dart 語言特型就能上手開發了。
Flutter 基礎開發需要了解的一些知識點
- Widget 概念
- 路由管理
- 包引用
- Widget 狀態更新
- 網路請求 + 資料解析
- 非同步操作
小 Tip：阿里某個團隊開源了一個『Flutter Go』專案，遇到不會的原生元件在上面直接搜名字即可看到使用方法，屬性說明什麼的，非常之方便！（開源萬歲）
專案地址： https://github.com/alibaba/flutter-go
可以仔細做一下 Flutter 中文網的這個教程 https://flutterchina.club/get-started/codelab/ 初步瞭解Flutter，做完這個教程，基本就可以上手開發我們的簡版『玩Android』客戶端了。
Day2 基本框架搭建
最外層用 Scaffold 包裹， Scaffold 直接支援底部導航欄這種佈局，我們只要實現 body 和 bottomNavigationBar 就可以。
頁面容器我們用 PageView 實現， 底部導航欄用 BottomNavigationBar 實現。
Scaffold(
body: PageView(
controller: _pageCtr,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
HomePage(),
ProjectPracticePage(),
WechatArticlePage(),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _tabIndex,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.deepPurpleAccent,
onTap: (index) => _click(index),
items: [
BottomNavigationBarItem(
title: Text('推薦'), icon: Icon(Icons.home)),
BottomNavigationBarItem(
title: Text('專案'), icon: Icon(Icons.map)),
BottomNavigationBarItem(
title: Text('公眾號'), icon: Icon(Icons.contact_mail)),
]),
)
三個介面都是有狀態的，所以都繼承 StatefulWidget ， 這樣就能簡單實現一個底部導航欄切換頁面的功能。
Day3 列表建立+網路資料獲取
文章和專案模組，用的都是頂部導航欄+列表的形式展示資訊
- 頂部導航欄選擇flutter自帶的 TabBar
- 列表還是選擇flutter自帶的 ListView
關於如何使用，Flutter Go 中一查便知
需要注意的是，由於切換到這個模組就需要網路請求，並且有資料後才開始繪製介面，所以我們這裡在構建Widget的時候需要 FutureBuilder ， FutureBuilder 使用方法可以在文末的專案中找到。主要就是可以拿到資料回撥的狀態，然後根據這個狀態再構建相應的widght。
網路操作我選擇的是 Dio 2.0，由於剛出來不久，並且和1.0還是有些不同，網上大部分文章都是基於1.0的，所以建議直接看官方文件學習，地址： https://github.com/flutterchina/dio#examples
我的專案中用單例封裝了一下網路請求操作，每個api請求封裝成一個方法，使用起來也很方便，具體在文末專案中可以找到。大概就是長這個樣子：
image.png
我先除錯的是網路請求，獲取到正確的資料後，測試 TabBar，頂部導航欄沒有問題，再建立ListView頁，條目的話就用隨便展示一個標題什麼的就可以。
Day4 跳WebView + ListView完善
為什麼我把 ListView 條目完善放到最後，因為我覺得在程式碼中寫檢視是在是太麻煩了，那麼多層，肯定是一個難啃的硬骨頭，結果上手之後發現，其實也就是看起來很麻煩，真正寫的時候，雖然不如android中XML檔案方便，但是確實有一種行雲流水的感覺QAQ。
好話說在前頭，寫起來雖然問題不大，但是真的不符合主流好嗎，寫完看的我頭大，隨便放張圖感受下：
image.png
後期維護成本也是問題，希望谷歌在這方面做一些改變，讓 Flutter 可以更好的發展下去。
在設計好一個檢視後，可以橫向縱向一層一層定義結構，行就用 Row ，列就用 Colunm ，使用方法就在 Flutter Go 上去查。在 Flutter 中，萬物皆為 Widght，可以在圖中看到，即使是一個邊距之類的，都會用一個 Widget 實現。
點選事件也是一個 Widght， 用 GestureDetector 實現。有兩個引數，一個是 onTap() , 也就是點選的回撥，一個是 child ，也就是我們需要點選事件的 widght。
這個專案中，點選事件都是跳 WebView 頁，然後看下 WebView 頁怎麼建立。如果不需要狀態管理，那麼就可以正常建立一個介面，然後child用 WebviewScaffold 實現，即可實現 WebView 的功能。
image.png
總結
大佬都說大前端是趨勢，身為客戶端開發者，瞭解一些大前端開發技術絕對不虧，甚至真香哈哈。
貼了那麼多地址，最後也把這個專案的地址貼上來吧 https://github.com/chinahaozai/enjoy_android