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
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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Content: Flutter框架概况发展概述发展历史框架特性框架结构 快速入门安装Flutter在Mac OS...
    EchoZuo阅读 6,507评论 3 54
  • flutter 是什么 flutter是Google基于Dart语言开发的移动应用开发框架,在保持原生性能的条件下...
    ChaoWang阅读 1,388评论 0 2
  • 本文翻译自 Add-Flutter-to-existing-apps 在已有项目中继承Flutter 约定:本文中...
    黄二瓜阅读 9,125评论 3 21
  • 新阳旭升,佳人渐远,无事人、几地漂泊。纵日暮笙歌,处处欢笑,难掩心底悲伤。思念情,与年华日增,但梦境常不我控。能为...
    旧时笔墨阅读 275评论 0 0
  • 人贵在有自知之明 要是没有。。。那就怪不得找不到男/女朋友,老婆/老公了!一直单身到现在。 今天,也不算今天吧,就...
    sakuranohin阅读 152评论 0 0