跟上时代潮流，一起学习Flutter

近期在Google/IO大会上flutter1.5的发布引起了业内很大的讨论，是时候着手感受一下它的开发体验了，总体来说Flutter的安装体验非常棒，几乎没遇到什么困难。我的机器是MacOS 10.14.3

安装

下载flutterSDKflutter_macos_1.5.4 , 下载之后解压改文件到指定目录，我的目录如下：

/Users/riverli/my/flutter
复制代码

将flutter命令添加到系统环境中，在.bash_profile中添加如下代码：

export PATH="$PATH:/Users/riverli/my/flutter/flutter/bin"
复制代码

环境检测：

执行 flutter doctor 命令，会在命令行中列出你的环境问题，只需要根据提示安装即可。达到如下效果即表示你的环境没有问题。

~ $ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.3 18D109, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[✓] Connected device (1 available)

• No issues found!
复制代码

我是使用Android Studio写flutter代码的，如果你不想使用Android Studio可以不用安装。Android Studio需要安装flutter插件才能开发代码；需要装两个插件flutter和Dart。安装flutter的过程中需要自动安装Dart。安装过程如下，在Android Studio的偏好设置中安如下图操作：

创建第一个flutter项目

创建项目可以通过命令行创建，也可以通过Android Studio创建，本文先使用命令行创建，后续文章会使用Android Studio创建。执行如下命令：

flutter create my_app
复制代码

进入创建的项目

cd my_app
复制代码

运行项目，执行如下命令：

flutter run
复制代码

你可以会遇到如下提示：

No connected devices.

Run 'flutter emulators' to list and start any available device emulators.

If you expected your device to be detected, please run "flutter doctor" to diagnose
potential issues, or visit https://flutter.dev/setup/ for troubleshooting tips.
复制代码

意思是说没有找到连接的设备，不知道项目执行到哪里。可以执行 flutter emulators 查看模拟器列表。执行一项得到如下信息：

~/my/flutter/my_app $ flutter emulators
2 available emulators:

4.7_WXGA_API_28     • 4.7in WXGA    • Generic • 4.7  WXGA API 28
apple_ios_simulator • iOS Simulator • Apple

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager
复制代码

我的机器上有两个可用模拟器 7_WXGA_API_28 和 apple_ios_simulator 我们启动其中一个，我选择的是iOS模拟器，执行如下命令：

~/my/flutter/my_app $ flutter emulators --launch apple_ios_simulator
复制代码

之后再执行 flutter run 即可启动项目。

~/my/flutter/my_app $ flutter run
复制代码

如下图：

代码热部署

在我们开发Android或者iOS原生项目的时候，每次修改代码都需要重新启动程序查看修改效果，flutter不需要这么做，在你修改完代码之后，只需要在命令行中安下 r 键即可部署代码。开发体验十分舒适。你可以尝试修改 lib/main.dart 文件下的代码，如95行 You have pushed the button this many times:', 尝试修改文案，在命令行中按下 r 看一看效果，这里就不贴图了。