先来看看效果图吧

 

想必很多同学已经开始体验flutter了吧，如果还没有安装，请移步
flutter 中文网
进行安装。

不过别着急，光看个热闹也是可以的，顺便熟悉一下 flutter 的语法，也是很不错的哦。

当然，在安装flutter过程中，可能会遇到一些坑，我只是记录了我自己的坑，如果想了解，请查阅我之前的文章。
那么，接下来，我们步入正题，我自行切入小白视角，大神路过
请手下留情，欢迎共同探讨

创建Flutter 流式布局工程

点击，然后默认next

 

然后改名，next

然后就创建好了

第一次创建Flutter项目的时候，可能时间会长一些，耐心等待就好。
创建好后，Flutter有一个示例项目，如果第一次玩的话，可以看一看，如下。

这样，我们项目就创建好了，接下来，我们开始正式编写流式布局代码

 

开始编写流式布局

上面，我们看到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文件会报错的，这里不用管，下面执行完命令之后就没事了

 

不过在此之前，需要在项目中的pubspec.yaml文件中填加一下依赖

      english_words: ^3.1.0

 

 

文件的位置及添加依赖的位置见下图

好了，上面两步都做好之后，还需要在terminal执行一下命令，用来导入这个单词库

flutter packages get

 

 

回车即可。

这样，这个单词库就可以使用了，而且main.dart文件也不会报错了，使用方法，我们这里也很简单，就是随机生成一个单词

    var wp=WordPair.random();//得到一个随机生成单词的wordpair
    wp.asPascalCase;//拿到单词的内容

OK，生成单词的问题搞定了

2、再来搞定单个块吧

这个东西，我们用Container来做
先来看下Container的属性

很简单，用color做颜色，用child做文字即可,height我们固定，padding也固定
来看一下单个块的代码

 

 

ok,如上图，我们先将单个块弄出来，然后返回，这样跑出来的效果是这样的

哦，效果还可以，就是有点小瑕疵，不过我们先不管，最后再调整即可。
注意上面的文字用到了Text控件，这个控件的属性是这样的，大家可以参考一下

 

 

青色的表示常用的属性
好了，下面我们开始逐行添加单词块

 

3、逐行添加单词块

根据上面的代码先进行一下调整，将生成单个单词块的代码抽取出来，抽取完成如下图：

创建一个方法，根据用户输入创建单词块的数量来创建n多个单词块，并将单词块存储在集合中

是不是很简单，接下来，遍历这个集合，然后逐行添加，这个时候需要考虑到行宽及行高

 

本文的关键来了

flutter为我们提供了一个Flow的控件，这是他的结构

 

所以，这里我们直接借助Flow即可，再也不用像Android那样重写LinearLayout了。

根据官方提示，paintChildren是用来控制Flow中子控件的排列的
而shouldRePaint则是决定是否重绘
接下来，我们开始编写paintChildren方法

 

ok，具体的代码及注释都已标注，请仔细阅读，这些东西，其实是本文章最重要的东西。

4、添加好后，修改我们之前的生成Widget的方法，实现流式布局的显示

 

这一步之后，效果就出来了~~~
请看

 

00.jpg

5、其实基本已经搞定了，但是现在和顶部的效果图还是有一定区别的,效果图中的文字是相对块居中的不知道小伙伴有没有注意到。

所以，后期还需要微调一下

 

 

我这里是使用了Stack进行了包裹，实现了居中的效果

 

6、最终效果~

总结
第一次使用flutter写东西，写的有些流水账，谈一下感想：
flutter 这个东西大体跟 java 还是很像的，只是布局不再像以前编辑 xml 文件，而是又回到了通过代码实现，不过实现方式其实 dart 语言提供了很多 Widget，等待我们挖掘。当然了，页面的跳转，他也有自己的方式
想关注更多flutter的东西，请大家持续关注~~~