参考官网的的开始使用，配置好开发环境即可进行 Flutter 开发了，当然开发前还是有必要了解一下 Dart 这门语言的，接下来涉及到与其他开发语言不太相同的地方会在文章里提出来。本教程使用的 flutter 版本为稳定版本 v2.0.6。
创建Flutter 工程
推荐使用命令行的方式新建工程（使用 IDE 创建的过程会比较慢），命令如下：
flutter create hello_world
Flutter 会默认创建一个示例工程，然后使用命令 打开工程（code 命令是 vscode 的一个别名，需要在.zshrc配置别名：alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'
code hello_word
项目目录结构如下图所示：
各个目录或文件说明如下：
- android：安卓原生工程配置相关文件，包括应用图标，原生资源，权限配置等，可以参考之前的关于安卓打包发布的文章：Flutter 如何发布安卓应用？
- ios：iOS 原生工程配置相关文件，熟悉 iOS 开发的会知道具体的用途，其中 最主要的是 Runner 下，设置到原生的配置，如最关键的 InfoPlist 文件，以及权限相关的配置，这些配置建议在 Xcode 中配置会更为直观。
- build：打包输出文件，主要是安卓打包文件，iOS 打包需要通过 Xcode 完成。
- lib：最重要的目录，所有源码都在这个目录，其中 main.dart 是入口文件，而 main 方法是入口方法。
- test：测试相关文件
- web：Flutter 2.0引入的，支持三端统一的 web 端文件
- pubspec.yaml：这个文件十分重要，所有的第三方依赖，以及文件依赖都通过这个文件管理，类似与苹果的 podfile 和安卓的 gradle 文件。
运行应用
如果要在安卓模拟器运行，则需要安装安卓 Studio，并配置好模拟器，至于安卓真机调试与安卓应用开发类似。苹果也一样，需要安装 Xcode并启动模拟器。真机调试苹果相对比较麻烦，需要有开发者账号，将真机的 identifier（设备唯一标识符）加入到对应应用的开发设备中，这个可以自行百度搜索如何配置。
完成配置后，选择要运行的设备或模拟器（右下角会显示当前选定的设备，如果没选则是 No Device，如下图）,命令行运行 flutter run皆可完成编译和进入代码调试。
Flutter 应用在调试过程中是支持热重载的（pub依赖改变了需要重新编译），因此尽量使用热重载，毕竟编译一次时间停长的。
开发设备配置
如果是要运行模拟器，对开发的设备要求还是挺高的，推荐使用 Mac Pro（16GB 内存）进行开发。Windows 电脑的话至少也需要16GB 内存，模拟器一旦运行起来那“呼呼”的风扇声让人听了感觉电脑干活挺累的！
来点小修改
运行起来 demo 了，不动手改改代码过过瘾都没什么太大感觉，我们来实现在屏幕中间显示 Logo，点击后切换图片的简单修改。
使用图片资源需要两个步骤，第一建立一个图片文件夹存放图片资源，第二是需要在 pubspec文件中指定依赖的资源目录。新建一个 images 文件夹存放图片文件，将图片文件（avatar.jpg 和qrcode.jpg）放到images 目录下。在 pubspec.yaml 文件中设置 assets 属性：
flutter:
uses-material-design: true
assets:
- images/avatar.jpg
- images/qrcode.jpg
# 其他配置
注意放置的位置不要弄错了，在 pubspec.yaml 中有相应的注释。配置完成后需要运行 flutter pub get命令更新一下依赖的资源。
主要代码如下所示：
class _MyHomePageState extends State {
List _imageNames = [
{'image': 'images/avatar.jpg', 'text': '岛上码农'},
{'image': 'images/qrcode.jpg', 'text': '扫码关注'}
];
int _index = 0;
void _onSiwtch() {
setState(() {
_index = (++_index) % _imageNames.length;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
width: 300,
height: 300,
child: Column(
children: [
Container(
width: 128,
height: 128,
margin: EdgeInsets.only(top: 10, bottom: 10),
child: Image.asset(
_imageNames[_index]['image'],
fit: BoxFit.cover,
),
),
Text(
_imageNames[_index]['text'],
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _onSiwtch,
tooltip: '切换',
child: Icon(Icons.swap_horizontal_circle_outlined),
),
);
}
}
代码逻辑如下：
_MyHomePageState类是 MyHomePage 的 一个有状态组件，Flutter 的组件和 React 的类似，分为无状态和有状态，无状态组件无法进行数据更新，有状态组件有自己的数据状态，根据数据状态更新界面。
下划线_代表这个类、方法或成员变量是私有的，在类的外部无法访问。在_MyHomePageState 中定义了一个 Map
页面组件的元素和层级如下：
- appBar：导航栏
- body：主界面
- Center：居中组件
- Container：页面元素容器，类似 html 的 div，通过这个 Container 指定界面中的尺寸和边距
- Column：纵向布局，即元素按纵向一次排布。
- 图片容器：用于限定图片的显示大小，边距等
- 图片：使用本地资源展示图片
- 文本：显示图片底下的文字
- 图片容器：用于限定图片的显示大小，边距等
- Column：纵向布局，即元素按纵向一次排布。
- Container：页面元素容器，类似 html 的 div，通过这个 Container 指定界面中的尺寸和边距
- Center：居中组件
- floatingActionButton：悬浮按钮
可以看到整个页面的层次和 HTML 很像，实际上 Dart 最开始的设计就是想替换 Javascript 的，而 Flutter 本身很多理念仿照了 React。从代码也可以看到，界面的嵌套层级很多，这被很多人吐槽，实际只要我们将组件抽离，就可以有效减少嵌套层级（界面的写法也有点类似 JSX，只是Flutter 内置了很多布局组件，简化了开发）。
最终效果
点击切换按钮图片和文字会随之变化