Flutter基础--看完这篇就可以撸App

---

这篇内容纯干货，手把手一步一步展示，从零到一个完整的app的构建。
上一篇文章已经教大家怎么搭建flutter的环境：传送门

首先看一下我们的我们今天的demo构建出来的是啥样子的

这篇文章我们要讲的东东有

a. layout结构
b. navBar
c. tabbar和列表组件的使用
d. http请求JSON数据，并渲染到列表
e. 组件之间的通信
f. 路由（带参数路由）

废话不多说，直接开干
首先，flutter的一个强大的特性就是其炫酷霸气的UI库，官方传送门：Material-UI库
在这里大家就可以任意选择自己喜欢的UI组件了。

navBar

首先做这个demo，我们要来拆分有哪些结构

肯定有个底部导航栏
我们底部导航栏分别要对应的界面（假设3张）

ok， 那我们先建立这些dart文件，并命名， 分别为第一个界面，第二个界面，第三个界面

接下来，我们给每一个tab子界面，加入简单的代码结构, 渲染出来就是这样的效果

其中 scaffold是一个脚手架，可以就理解为一个html，appBar就是上面的那个titlebar，body就不用说了吧

有了这3个界面，我们就可以回到main.dart中，去加入一个底部导航，并且把他们都关联起来！

首先我们要将这3个tab界面引入到我们的父组件，就是main.dart中，像这样