这是 JsonChao 的第 324 期分享
前言
很高兴遇见你~
在本系列的上一篇文章中，我们全面介绍了 Dart 语法，内容很多，文字+代码有三万多字，如果你能够耐心看完并手敲里面的示例，你一定会收获很大。还没有看过上一篇文章的朋友，建议先去阅读 Flutter 系列（二）：Dart 语法筑基。接下来我们进入 Flutter 的学习。
一、Flutter 特点介绍
学习一个框架，我们首先要了解这个框架的特点，就好比你学开车一样，你要知道这个车有什么特点，你才能快速的去上手它。Flutter 特点介绍：
1.1、在 Flutter 中，万物皆 Widget（组件）
我们在写 Flutter 时，一定要有这样的意识。这样我们才能更好地上手学习。在 Flutter 中，几乎任何东西都是 Widget，不仅是常见的 UI 组件，甚至是布局方式，样式，动画等都是 Widget
1.2、Widget 嵌套
写 Android 时，我们会在 Xml 文件中编写布局及 View 嵌套，然后在 Java 或 Kotlin 文件中进行 View 逻辑编写。但写 Flutter，无论是 Widget 嵌套，还是 Widget 逻辑编写，都是在 Dart 文件中进行处理，这样就会产生一些问题：
1、复杂界面出现各种深层 Widget 嵌套
2、代码逻辑混乱，可读性差
作为 Android 开发，我一开始真的很不习惯，但是随着你学习的深入，对项目进行合理的架构设计，包结构设计，清晰的代码注释，上面的问题在一定程度上得到了解决
1.3、Widget 状态
在 Flutter 中，Widget 分为两种：
1、无状态 Widget
2、有状态 Widget
无状态 Widget (继承自 StatelessWidget)：初始化后无法修改其状态和 UI，如：Text，ScrollView
有状态 Widget (继承自 StatefulWidget)：其状态可能在 Widget 生命周期中发生变化。如 Image， Scrollable 等。在调用 setState 方法后，Widget 会重新绘制，创建其新的 Widget
StatelessWidget 和 StatefulWidget 都继承自Widget
小 Tips：
1、在你编写自定义 Widget 时，你首先判断它是有状态的还是无状态的，如果 Widget 需要根据用户交互或其他因素进行更改，则该 Widget 是有状态的，否则就是无状态的
2、当你需要改变 Widget 状态时，必须调用 setState 方法来通知 Flutter 来更新创建新的 Widget
注意：上面一些特点可能一开始不能理解，接着往下看，有些问题随着你知识的积累便迎刃而解了
二、Flutter 常用 Widget 介绍
先看一张效果图：
问题：上面的效果怎么实现的呢