這篇內(nèi)容純干貨，手把手一步一步展示，從零到一個完整的app的構(gòu)建。
上一篇文章已經(jīng)教大家怎么搭建flutter的環(huán)境：傳送門
http://www.itdecent.cn/p/a1344cfea21d
首先看一下我們的我們今天的demo構(gòu)建出來的是啥樣子的
這篇文章我們要講的東東有
a. layout結(jié)構(gòu)
b. navBar?
c. tabbar和列表組件的使用
d.?http請求JSON數(shù)據(jù)，并渲染到列表
e. 組件之間的通信
?f.? 路由（帶參數(shù)路由）
廢話不多說，直接開干
首先，flutter的一個強(qiáng)大的特性就是其炫酷霸氣的UI庫，官方傳送門：Material-UI庫
http://www.material-ui.com/#/
在這里大家就可以任意選擇自己喜歡的UI組件了。
navBar
首先做這個demo，我們要來拆分有哪些結(jié)構(gòu)
1. 肯定有個底部導(dǎo)航欄
2. 我們底部導(dǎo)航欄分別要對應(yīng)的界面（假設(shè)3張）
ok， 那我們先建立這些dart文件，并命名， 分別為第一個界面，第二個界面，第三個界面
接下來，我們給每一個tab子界面，加入簡單的代碼結(jié)構(gòu),? 渲染出來就是這樣的效果
其中 scaffold是一個腳手架，可以就理解為一個html，appBar就是上面的那個titlebar，body就不用說了吧
有了這3個界面，我們就可以回到main.dart中，去加入一個底部導(dǎo)航，并且把他們都關(guān)聯(lián)起來！
首先我們要將這3個tab界面引入到我們的父組件，就是main.dart中，像這樣
然后，我們來改造我們的main下面的widget， 像這樣
其中TabController 就是tabbar的控制器，
然后我們在initState()初始化的時候，注意那個length屬性，就是表示有幾個tab，剩下的就不用管了，當(dāng)走流程吧。
然后就是在首頁的Scaffold中去加入一個bottomNavigationBar， 這個大家一看都懂是啥，?底部導(dǎo)航欄
然后在child里面new一個TabBar出來，TabBar中的tabs屬性里面包含了一個Tab widget數(shù)組，每個Tab就是對應(yīng)的下面的圖標(biāo)和文案， controller就是控制器了，應(yīng)該都很好理解吧。
body：就是一個TabBarView widget， 里面的屬性和TabBar widget都是對應(yīng)著來的。
還有記得加入?SingleTickerProviderStateMixin, 記住就好，不要深究。
然后flutter run 跑起來，就實(shí)現(xiàn)了一個簡單的底部導(dǎo)航了。
注：這里沒有使用appBar屬性，因?yàn)樵趖ab子組件中定義了，這里添加了就會生成2個appbar了。
現(xiàn)在我們要在子組件中加入一個list組件
我們就集中放在firstPage里吧。
我們把列表定義為一個木偶組件，那我們就把他放進(jìn)components里面，代碼和效果如下：
布局layout
在這里我們就要說一下layout了.
先放官方傳送門：flutter layout widget
可以大致分為2類：
1. Single-child layout widgets；父級widget中只能包含唯一一個子級widget
主要有： Contrainer、Padding、Center等等
2. Multi-child layout widgets；父級widget中能包含多個子級widget
主要有： Row、Column等等
一個官方的實(shí)例，就可以很明白的展示一個比較復(fù)雜的布局
說白了，layout的方式就是一層一層的搭積木，和H5的基本一樣，一層一層的往里面寫，multi-child layout widget 默認(rèn)支持flex布局，可以通過mainAxisAlignment（主軸屬性）和?crossAxisAlignment（垂直軸屬性）來進(jìn)行flex布局。
mainAxisAlignment: MainAxisAlignment.spaceBetween
crossAxisAlignment: CrossAxisAlignment.center。
到此為止，我們就得到一個列表，接下來我們就要通過http請求接口，將返回的JSON數(shù)據(jù)綁定到我們的列表上去。
http請求
dart提供了io庫
dart:io
類型轉(zhuǎn)換庫
dart:convert
注：由于版本的跟新，其中代碼有如下改動：
UTF8.decoder => utf8.decoder
json.decode => jsonDecode
我們定義個getData() 方法，后面帶個 async，就是解決異步的，當(dāng)然后面要更是await，大家應(yīng)該都懂。
反正就是很標(biāo)準(zhǔn)的一個http請求，在response.statusCode == HttpStatus.OK時(或者是 == 200)， 就得到了我們想要的數(shù)據(jù)，然后JSON.decode一下，然后setState方法，給我們widget中定義的參數(shù)賦值，然后就可以用了。如圖下，紅色圈出來的就是使用的方法。 在此我定義的參數(shù)為 data.
這樣，JSON數(shù)據(jù)就成功的渲染了。
一個列表項(xiàng)肯定可以點(diǎn)擊進(jìn)入去查看他的詳情頁，所以，接下來我們就來實(shí)現(xiàn)這個小功能。
路由
這里要用到的就是路由功能了。
官方實(shí)例如下：官方導(dǎo)航+路由鏈接
在我們的app中，寫法也是差不多的，但是我們需要將我們router的地址首先定義到我們的main.dart中
這樣，我們就能在其他界面中，通過"/detail"的路徑，路由到這個界面。
但是正常的應(yīng)用中，我們的路由或多或少會帶上一些參數(shù)，使得進(jìn)入下一個界面時，可以利用參數(shù)實(shí)現(xiàn)一些邏輯或者請求等等，下面我們就來看看怎么在路由中傳遞參數(shù)：
左圖是list界面，右邊是detail界面，要做的事：
1. 在列表中l(wèi)istTile中加入onTap事件，然后定義一個_onTap function，其中要接受String類型參數(shù)id，
2. 在navigator中push一個pageRouteBuilder, 直接將我們寫好的Detail類返回出來，帶上參數(shù)id.（當(dāng)然我們要提前在本界面中，把Detail的import進(jìn)來，不然返回個吊啊。。）。后面的transition就是過度動畫（現(xiàn)在不用管，反正這段代碼都是官方的）。
3. 在Detail.dart中一定要定義你需要傳入的參數(shù)名稱，不然就gg了。最后就可以為所欲為了， 哈哈。
在這里，點(diǎn)擊每一個對應(yīng)的列表項(xiàng)，將跳轉(zhuǎn)到對應(yīng)的detail界面，并把列表項(xiàng)中的id屬性，一起傳過去，并顯示出來，通過左上回退按鈕，就可以回到列表頁，如下圖顯示：
組件通信
在vue, react各種流行的年代，那組件化的思想，flutter也不能丟了。那接下來我們就來實(shí)現(xiàn)一下組件之間的通信。那我們就在<通知>這個tab中來實(shí)現(xiàn)一個簡單的組件化通信。直接上代碼：
左邊父組件：
1. 我們這里做了一個input框，然后定義一個參數(shù)： active
2. 通過改變input的onChanged事件監(jiān)聽input值的變化，并賦值給Input組件的active
右邊子組件：
1. 通過下面代碼，接收傳過來的active的值
Input({Key key, this.active})
????: super(key: key);
2. 顯示active的值的變化
這樣就實(shí)現(xiàn)了簡單的父組件對子組件的通信。
相關(guān)
下一篇：flutter基礎(chǔ)-組件通信(父子、兄弟）
結(jié)語
到這里本篇就結(jié)束了，有了以上的這些技術(shù)點(diǎn)，完全夠咱們擼一個簡單但完整的app出來了吧，大家有機(jī)會就自己來試試，分分鐘擼一個app。
文章寫得實(shí)在匆忙，也是純新萌，所以邏輯如果有沒理順的，東西寫錯了的，大家就直接留言噴就好！
最后打包的流程，可以參考魚丸大神的這片文章：傳送門
http://www.itdecent.cn/p/f91b4e84cec8
