先來看看效果圖吧
想必很多同學已經開始體驗flutter了吧累澡，如果還沒有安裝，請移步
flutter 中文網
進行安裝般贼。
不過別著急愧哟，光看個熱鬧也是可以的，順便熟悉一下 flutter 的語法哼蛆，也是很不錯的哦蕊梧。
當然，在安裝flutter過程中腮介，可能會遇到一些坑肥矢，我只是記錄了我自己的坑，如果想了解叠洗，請查閱我之前的文章甘改。
那么，接下來灭抑，我們步入正題十艾，我自行切入小白視角，大神路過
請手下留情腾节，歡迎共同探討
創(chuàng)建Flutter 流式布局工程
點擊疟羹，然后默認next
然后改名，
next
然后就創(chuàng)建好了
第一次創(chuàng)建
Flutter項目的時候禀倔，可能時間會長一些榄融，耐心等待就好。創(chuàng)建好后救湖，
Flutter有一個示例項目愧杯，如果第一次玩的話，可以看一看鞋既，如下力九。
這樣，我們項目就創(chuàng)建好了邑闺，接下來跌前，我們開始正式編寫
流式布局代碼
開始編寫流式布局
上面，我們看到flutter項目的目錄結構很好玩
- android
- ios
- lib
等等陡舅，而android中的清單文件是這個樣子的
說明flutter僅僅是把android的這個MainActivity當做一個殼子抵乓，里面嵌入了自己的代碼。
而我們要編輯的文件則是lib包下面的main.dart即dart文件
我們先看一下示例代碼
這個示例代碼的架子我還留著，但是灾炭，我要修改一下茎芋，主要動的是
MyHomePage這一部分，如圖
body需要修改
floatingActionButton我們就不要了蜈出，所以田弥，經過修改之后的是這樣的
好了，接下來的關鍵就是這個流式布局怎么寫??
重頭戲來了
1铡原、首先偷厦，我們先隨機生成文字，用來準備要顯示的文字
這里選擇一個包含很多單詞的單詞庫
import 'package:english_words/english_words.dart';
見下圖
main.dart文件會報錯的只泼，這里不用管，下面執(zhí)行完命令之后就沒事了
不過在此之前酌儒，需要在項目中的pubspec.yaml文件中填加一下依賴
english_words: ^3.1.0
好了辜妓，上面兩步都做好之后枯途，還需要在terminal執(zhí)行一下命令忌怎，用來導入這個單詞庫
flutter packages get
這樣酪夷，這個單詞庫就可以使用了榴啸，而且main.dart文件也不會報錯了，使用方法晚岭，我們這里也很簡單鸥印，就是隨機生成一個單詞
var wp=WordPair.random();//得到一個隨機生成單詞的wordpair
wp.asPascalCase;//拿到單詞的內容
OK，生成單詞的問題搞定了
2坦报、再來搞定單個塊吧
這個東西库说，我們用Container來做
先來看下Container的屬性
很簡單，用
color做顏色片择，用child做文字即可,height我們固定潜的，padding也固定來看一下單個塊的代碼
ok,如上圖，我們先將單個
塊弄出來字管，然后返回啰挪，這樣跑出來的效果是這樣的
哦，效果還可以嘲叔，就是有點小瑕疵亡呵，不過我們先不管，最后再調整即可硫戈。
注意上面的文字用到了
Text控件锰什，這個控件的屬性是這樣的，大家可以參考一下
青色的表示常用的屬性
好了，下面我們開始逐行添加
單詞塊
3歇由、逐行添加單詞塊
根據上面的代碼先進行一下調整卵牍，將生成單個單詞塊的代碼抽取出來，抽取完成如下圖：
創(chuàng)建一個方法沦泌，根據用戶輸入
創(chuàng)建單詞塊的數量來創(chuàng)建n多個單詞塊糊昙，并將單詞塊存儲在集合中
是不是很簡單，接下來谢谦，遍歷這個集合释牺，然后逐行添加，這個時候需要考慮到
行寬及行高
本文的關鍵來了
flutter為我們提供了一個Flow的控件回挽，這是他的結構
所以没咙，這里我們直接借助Flow即可，再也不用像Android那樣重寫LinearLayout了千劈。
根據官方提示祭刚，
paintChildren是用來控制Flow中子控件的排列的而
shouldRePaint則是決定是否重繪接下來，我們開始編寫
paintChildren方法
ok墙牌，具體的代碼及注釋都已標注涡驮，請仔細閱讀，這些東西喜滨，其實是本文章最重要的東西捉捅。
4、添加好后虽风，修改我們之前的生成Widget的方法棒口，實現流式布局的顯示
這一步之后，效果就出來了~~~
請看
5辜膝、其實基本已經搞定了无牵，但是現在和頂部的效果圖還是有一定區(qū)別的,效果圖中的文字是相對塊居中的不知道小伙伴有沒有注意到。
所以厂抖，后期還需要微調一下
我這里是使用了Stack進行了包裹茎毁，實現了居中的效果
6、最終效果~
總結
第一次使用flutter寫東西验游，寫的有些流水賬充岛，談一下感想：
flutter 這個東西大體跟 java 還是很像的，只是布局不再像以前編輯 xml 文件耕蝉，而是又回到了通過代碼實現崔梗，不過實現方式其實 dart 語言提供了很多 Widget，等待我們挖掘垒在。當然了蒜魄，頁面的跳轉懈玻，他也有自己的方式
想關注更多flutter的東西寸莫，請大家持續(xù)關注~~~
