跟上时代潮流，一块儿学习Flutter

文章概述

经过阅读本文，你大体上可以了解到以下内容：

• 安装Flutter
• 建立第一个Flutter项目
• 体验Flutter的代码热部署

Flutter

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

安装

下载flutterSDK flutter_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 看一看效果，这里就不贴图了。

总结

OK，本文要将的内容已经完结，不知道你看了以后本身的环境是否搭建好了，是否建立了你的第一个flutter项目，是否体验了代码热部署。若是你有任何问题能够关注个人公众号，给我留言，我会第一时间帮你解答。

下面一篇文章我将讲一下使用flutter作一个简单的列表。