一.关于Flutter
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
二.安装Flutter
以macOS为例
使用镜像
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。
安装:Flutter macOS版并解压.
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor
运行 flutter doctor
运行以下命令查看是否需要安装其它依赖项来完成安装：
flutter doctor
三.配置编辑器
Android StudioVC CodeIntelliJ
VS Code: 轻量级编辑器，支持Flutter运行和调试.
安装 VS Code
1.安装Flutter插件
- 启动 VS Code
- 调用 View>Command Palette…
- 输入 ‘install’, 然后选择 Extensions: Install Extension action
- 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
选择 ‘OK’ 重新启动 VS Code
2.通过Flutter Doctor验证您的设置
- 调用 View>Command Palette…
- 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
- 查看“OUTPUT”窗口中的输出是否有问题
让我们来体验一下Flutter：创建第一个项目，运行它，并体验“热重载”.
四.创建第一个FlutterApp
创建新的应用
- 启动 VS Code
- 调用 View>Command Palette…
- 输入
flutter, 然后选择 ‘Flutter: New Project’ action - 输入 Project 名称 (如flutter_app) , 然后按回车键
- 指定放置项目的位置，然后按蓝色的确定按钮
- 等待项目创建继续，并显示main.dart文件
- 注意取名不要有大写字母
上述命令创建一个Flutter项目，项目名为如flutter_app，其中包含一个使用Material 组件的简单的演示应用程序。
在项目目录中，您的应用程序的代码位于 lib/main.dart这个文件.
运行应用程序
- 确保在VS Code的右下角选择了目标设备
- 按
fn+F5键或调用Debug>Start Debugging - 等待应用程序启动.
- 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序
体验热重载
Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语:如果是一个web开发者，那么可以认为这和webpack的热重载是一样的）。简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。
- 用你喜欢的编辑器打开文件lib/main.dart
- 将字符串
'You have pushed the button this many times:' 更改为
'You have clicked the button this many times:' - 不要按“停止”按钮; 让您的应用继续运行.
- 要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮).
你会立即在运行的应用程序中看到更新的字符串
常见异常
- 新建项目或者打开新的项目出现: Waiting for another flutter command to release the startup lock...
当你的项目异常关闭，或者android studio用任务管理器强制关闭，下次启动就会出现上面的一行话，
解决办法：
此时需要打开 flutter/bin/cache/lockfile，删除就行了
或者直接用下面的命令：rm ./flutter/bin/cache/lockfile
网友评论