布局控件
布局控件可以类比作原生开发中的 Layout ， 通常它会拥有一个 children 的属性 ， 用于接收一个控件数组 ， 对这些控件进行特定的排版 。
常用的布局控件有 Row、Column、Stack、Flex 等 。
基础控件
基础控件就是常用的文字、按钮、图片等控件 。
常用的基础控件有 Text、TextField、Button、Image 等 。
功能控件
在 Flutter 里还有一类控件 ， 它们不影响 UI 布局 ， 但带有一些特定的功能 ， 比如页面跳转、事件监听、定义主题等 。我们把这一类控件称作功能控件 。
常用的功能控件有 Navigator、NotificationListener、Theme 等 。
开始写 Flutter 代码了 。还记不记得 ， 在 Flutter 项目创建之后 ， 是自带一个计数器 demo 的 ， 现在我们用自己的代码实现一遍 。代码修改成如下：
运行之后 ， 就可以看到这样的界面了：
按钮每点击一次 ， 数字就会加一 。下面我们来分析一下这段代码 ， 看下里面用到的一些 Widget 。
StatefulWidget
由于页面中的数字是跟随状态变化的 ， 所以该页面改用 StatefulWidget 。StatefulWidget 并不会直接返回一个 Widget ， 而是返回状态 State ， 在 State 里再返回 Widget 。
Scaffold
Scaffold 是一个标准的 Material Design 页面 ， 它包含了标题栏、浮动按钮、侧滑菜单、底部导航栏等配置 。我们这里用到了标题栏 appBar、页面内容 body、浮动按钮 floatingActionButton 。
AppBar
AppBar 就是标题栏 ， 通过查看控件的构造方法 ， 我们可以知道它可配置的属性 。
AppBar 的可选参数除了标题 title ， 还可以配置标题前的内容 leading ， 右侧的操作按钮 anctions ， 控件垂直高度 elevation 等 。我们只传了 title ， 其他属性都用默认值 。
Center
Center 是一个容器类控件 ， 它的作用就是让它的子控件居中显示 。
FloatingActionButton
熟悉安卓开发的应该对这个控件比较熟悉 ， 它就是页面右下角一个特定样式的 Button ， 参数里面的 onPressed 是一个必填项 ， 要传一个点击之后的回调函数 。
根据这个例子 ， 下面给大家介绍一下 Flutter 两个比较重要的特性 。
点击 Button 之后 ， 我们把 num 变量加一 ， 并使用 setState 通知状态发生了改变 ， Flutter 会根据新的状态更新 UI 。如果有接触过小程序开发 ， setState 就和小程序的 setData 类似 。
在 Flutter 里面我们不需要用 set 方法来更新 UI ， 可变控件是和状态绑定的 ， 这就是 Flutter 的响应式 UI 编程 。
在 Android Q 和 iOS 13 里都加入了暗黑模式 ， 我们也换一个暗黑主题来玩一下 。MaterialApp 里有一个 theme 的属性 ， 我们把它配置一下:
这次改完之后不点Run了 ， 我们点一下闪电图标Flutter Hot Reload ， 就能看到界面发生了变化:
这就是 Flutter 的 热重载 ， 在修改完代码之后 ， 通过热重载就能马上在设备上看到修改结果 ， 可以很大程度上增加开发效率 。
下面再给大家介绍几个 Flutter 里的常见操作 。
在 Flutter 里 ， 使用 Navigator 来管理页面跳转 ， 比如要跳转到一个 NewPage 可以这样写:
进栈使用 push ， 出栈则是 pop 。
使用 MaterialPageRoute 会模拟出 Android 上页面跳转的过场效果 。
我们来看看怎么显示一张本地图片 。
先在根目录新建一个存放图片的文件夹 ， 比如叫 images ， 把图片 picture.png 放进去 。
找到根目录下的 pubspec.yaml 文件 ， 这个便是 Flutter 依赖配置文件 ， 我们需要在这里配置一下刚才的图片：
这样 ， 我们就能使用 Image 控件把这张图片显示出来了：
和 node 的 npm 以及 Android 的 jcenter 类似 ， Flutter 也拥有一个公共仓库 pub.dev 。pub.dev 是 Google 官方的 Dart 仓库 ， 在上面可以找到我们需要的包和插件 。
Flutter 本身没有 Toast ， 我们来接入一个 。在 pub.dev 上搜索后 ， 我决定使用 fluttertoast：
按照说明 ， 在 pubspec.yaml 文件里的 dependencies 下配置：
点一下 Android Studio 右上角的 Packages get 同步之后就可以使用了：