首先,什么是flutter?
Flutter是谷歌爸爸推出的在iOS和Android两个平台使用Dart语言开发原生应用的移动框架.至今(20180705)还未出正式版.
这里吐槽一下:Dart语言的可读性真的是太差了,各种括号的嵌套真的头疼...
其次,为什么用flutter?
原因有很多,可以看下以下文章
5 个你也许会喜欢 Google Flutter 的理由
为什么说Flutter是革命性的？
你好，Flutter
然后,怎么用flutter?
因为我是做iOS开发的,这里简单说下mac版搭建Flutter开发环境的大概过程
在当前终端窗口运行以下命令使用Git获取Flutter SDK，并临时设置PATH变量。
git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH
运行以下命令查看是否有依赖关系需要安装以完成设置，此命令检查环境并向终端窗口显示报告。
flutter doctor
该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。仔细检查输出信息是否需要安装其他软件或者执行其他任务(以粗体字显示)。
第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。
那么可以cd到你想要创建项目的位置
flutter create myapp
这里的项目名称必须是小写,执行该命令来创建项目
创建完成后在ios文件夹里打开xcworkspace就可以跑了
也可以使用命令
flutter run
image.png
如果使用命令的话,可以使用flutter的热重载功能,这也是flutter的一大亮点(当然RN也是支持该功能的),即在不重启应用的前提下来刷新页面
image.png
这里有 hot reload 和 hot restart两个选择.
image.png
restart就是重启应用,reload则是在不重启应用的前提下刷新页面.
很明显,后者速度比前者快得多,在开发调试时有着很大优势
可以简单测试下
lib/main.dart便是当前项目的入口,打开后会发现其将main函数指向myapp类
image.png
这段英文注释讲的就是热加载...我们可以按照其说的,先点击几次按钮,再将primarySwatch的color改成green,再在终端上输入r,会发现记录的按钮点击次数没有变为0,说明没有重启,然而颜色却改变了,说明实现了在不重启应用的前提下重启应用,也就是热加载
此外,在vscode上也能进行单步,断点,热加载等调试
image.png
常用flutter命令
| 常用命令 | 含义 |
|---|---|
| --version | 查看Flutter版本 |
| -h或者--help | 打印所有命令行用法信息 |
| analyze | 分析项目的Dart代码。 |
| build | Flutter构建命令。 |
| channel | 列表或开关Flutter通道。 |
| clean | 删除构建/目录。 |
| config | 配置Flutter设置。 |
| create | 创建一个新的Flutter项目。 |
| devices | 列出所有连接的设备。 |
| doctor | 展示了有关安装工具的信息。 |
| drive | 为当前项目运行Flutter驱动程序测试。 |
| format | 格式一个或多个Dart文件。 |
| fuchsia_reload | 在Fuchsia上进行热重载。 |
| help | 显示帮助信息的Flutter。 |
| install | 在附加设备上安装Flutter应用程序。 |
| logs | 显示用于运行Flutter应用程序的日志输出。 |
| packages | 命令用于管理Flutter包。 |
| precache | 填充了Flutter工具的二进制工件缓存。 |
| run | 在附加设备上运行你的Flutter应用程序。 |
| screenshot | 从一个连接的设备截图。 |
| stop | 停止在附加设备上的Flutter应用。 |
| test | 对当前项目的Flutter单元测试。 |
| trace | 开始并停止跟踪运行的Flutter应用程序。 |
| upgrade | 升级你的Flutter副本。 |
搭建Flutter开发环境过程中的一些常见问题:
1.-bash: flutter: command not found
export PATH=`pwd`/flutter/bin:$PATH
如果还是不行,就cd到flutter文件夹的上层文件夹,再去执行
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=`pwd`/flutter/bin:$PATH
如果依旧不行,就删掉旧的flutter文件夹,按照上边说的重新安装一次
2.Waiting for another flutter command to release the startup lock...
打开活动监视器关掉其余Dart进程
3.RangeError (index): Invalid value: Only valid value is 0: 1
flutter clean
4.Unable to load asset...
首先图片目录要正确,比如
new Image.asset('lib/images/section1.png'),
其次要在pubspec.yaml文件里加上下边代码
flutter:
uses-material-design: true
assets:
- 'lib/images/section1.png
https://flutter.io/assets-and-images/
参考文档:
Flutter官网
Flutter官网中文版
Flutter中文文档
Flutter教程
Flutter中文开发者论坛
从环境搭建到进阶系列教程
Flutter从配置安装到填坑指南详解，Flutter相关Demo解读，项目实例，Dart语法详解
Flutter 中文用户组入群号: 482462550
网友评论