1.flutter简介与环境搭建

首先,什么是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

《1.flutter简介与环境搭建》 image.png

如果使用命令的话,可以使用flutter的热重载功能,这也是flutter的一大亮点(当然RN也是支持该功能的),即在不重启应用的前提下来刷新页面

《1.flutter简介与环境搭建》 image.png

这里有 hot reload 和 hot restart两个选择.

《1.flutter简介与环境搭建》 image.png

restart就是重启应用,reload则是在不重启应用的前提下刷新页面.
很明显,后者速度比前者快得多,在开发调试时有着很大优势

可以简单测试下
lib/main.dart便是当前项目的入口,打开后会发现其将main函数指向myapp类

《1.flutter简介与环境搭建》 image.png

这段英文注释讲的就是热加载…我们可以按照其说的,先点击几次按钮,再将primarySwatch的color改成green,再在终端上输入r,会发现记录的按钮点击次数没有变为0,说明没有重启,然而颜色却改变了,说明实现了在不重启应用的前提下重启应用,也就是热加载

此外,在vscode上也能进行单步,断点,热加载等调试

《1.flutter简介与环境搭建》 image.png

常用flutter命令

常用命令含义
–version查看Flutter版本
-h或者–help打印所有命令行用法信息
analyze分析项目的Dart代码。
buildFlutter构建命令。
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

    原文作者:Theendisthebegi
    原文地址: https://www.jianshu.com/p/624ff6157b20
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞