一、基本介绍

Flutter 是谷歌公司开发的一款开源、免费的移动 UI 框架,可以让我们快速的在 Android 和 iOS 上构建高质量 App。它最大的特点就是跨平台、以及高性能。

Flutter 基于谷歌的 dart 语言,如果没有任何 Dart 语言的基础,不建议直接学习 Flutter。

建议先学习 Dart 语言的基本语法,然后再进入 Flutter 的学习。

Dart documentation | Dart

Dart基本语法参考 Demo

市面上已经有很多的混合 App 开发框架了,但是有些混合 APP 开发框架主要是针对前端开 发者的:比如 ReactNative(基于 React)、Ionic(基于 Angular、Vue、React)。有些则是 针对.Net 平台针对.Net 开发者的比如:Xamarin

Flutter 是谷歌基于 Dart 语言开发的一款跨平台的移动 App 开发框架。它针对的开发者是全 部开发者。它的性能相比 RN、Ionic 这样的框架要好一些,但是现在的手机设备上是看不出 任何区别的。

由于谷歌的推广,以及国内阿里的闲鱼 App 是 Flutter 开发的。所以 Flutter 目前(2019 年 5 月 22)关注度非常高的框架。所以非常有必要学习。因为大家都在学,我们不学是不是就 有点 Out 了。但是我们要知道的一点就是 Flutter 还比较年轻,相比 Ionic、以及 RN 这样的 老框架来说社区不是特别完善。还有就是学习成本高。希望未来社区能更加完善、学习成本 更低。

二、Windows 上面搭建 Flutter Android 运行 环境

1、电脑上面安装配置 JDK

1. 下载安装JDK

2. 配置 JDK

2.1 系统变量里面新增 JAVA_HOME,设置值为 java SDK 根目录:

frc ab8ebb6392111b9f06358dde6d1ca260 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
编辑系统变量

2.2 系统变量找到 Path 在 Path 环境变量里面增加如下代码

;%JAVA_HOME%bin;%JAVA_HOME%jrebin 

frc 63dc57bad175f470edf304cec9a7858a - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境

2、电脑上下载安装 Android Studio

下载安装 Android Studio

frc bad128488831d2586ebfa6999748e6b1 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
Android Studio图标

3、电脑上面下载配置 Flutter SDK

1. 下载 Flutter SDK

2. 把下载好的 Flutter SDK 减压到你想安装 SDK 的目录如(E:flutter_windowsflutter)

frc 193aa7d720a3ba391ef219e275c9ee5e - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
Flutter SDK 安装目录

3. 把 Flutter 安装目录的 bin 目录配置到环境变量.

如上图所示需要把 E:flutter_windowsflutterbin 目录配置到 path 环境变量里面

frc 1622739ee082972cc7a8013b68cc49ac - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
flutter目录配置

4、电脑上配置 Flutter 国内镜像

搭建环境过程中要下载很多资源文件,当一些资源下载不了的时候,可能会报各种错误。在

国内访问 Flutter 的时候有可能会受到限制,Flutter 官方为我们提供了国内的镜像

Flutter 社区中文资源

Using Flutter in China – Flutter

拉到 Flutter 中文网最下面有配置方式,把下面两句配置到环境变量里面

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

PUB_HOSTED_URL: https://pub.flutter-io.cn

frc 9131b3e932cfdf8e37721f52f3192034 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
Flutter 国内的镜像环境配置

5、运行 flutter doctor 命令检测环境是否配置成功

frc b8c86050fa6acf5d0a11da506c855a5d - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
检测环境是否配置成功

第一次运行的时候会提示下面错误:

frc 04f45bd11f1744571a6b2e1f99b76436 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
错误提示

这个时候复制上面红色框框内的命令

flutter doctor –android-licenses

注意:提示输入 Y/N 的地方全部输入 Y

frc fc74068bcfac702ffa7af255a797874d - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
解决错误

6、打开 Android Studio 安装 Flutter 插件

frc 3d44761ace333c7e861d22db12779552 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
选择插件菜单
frc effe4e305ba045c6fb47ad489a4212d5 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
搜索 flutter 插件
frc c2ad7c3a604c220d0d281d0a52b2cfb3 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
安装 flutter
frc 74752838b941916ec155d4334e4d316e - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
安装 Dart 插件
frc f0b6d5f7a155afd00d3a4def87df7c21 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
重启 Android Studio

 7、创建 Flutter 项目

frc d36dbd72b8ba11e0abc6e42870f9523e - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
选择 Flutter 项目
frc a98c31bf975843be0a946b5a65533f37 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
选择 Flutter App 项目
frc 5d132b838af6d11bfefffb4662b675f2 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
设置路径
frc ca552aa974fa8b587380ca92c598cb9f - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
配置

8、Android Studio 中导入 Flutter 项目,运行项目

frc 4d95f09bde361099e140d8b88f6992a5 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
open an existing Android Studio project
frc 5fa81cc077ce5ddac834851f035b97dc - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
下载 gradle 压缩包
frc 3c10ea6acfcba605d44b0ab3653b832a - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
已下在 gradle 压缩包
frc 88b7bdf6d40c079e39328aa8f116bbae - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
使用 gradle

如果报错点击 File -> Sync Project With Gradle Files 重新下载 Gradle ,这个过程比较慢 10-30 分 钟左右。

frc 1900eb71e095f89adb01209679876b4e - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
重新下载 Gradle

如果弹出下面界面点击中间的,不然它又会重新下载 Gradle,等我们开发完成没事的时候升级。

frc 97124deac035859142475a54dd1732eb - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
暂不更新
frc 47c418af7e2b9dd068196e957f7043d1 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
连上手机真机调试

 9、可能遇到的错误

frc 240b73899caaec26a9475f93cc3f0a02 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
Gradle 提示
frc 7ffd0ec32e371639fbdde2b4e1178af5 - Flutter 01 - 基本介绍、Windows 上面搭建 Flutter Android 运行环境
下载 Gradle 失败

下载 Gradle 失败解决方案:

1. 开启手机热点重试

2. 谷歌或者百度搜索 “android Gradle 编译时下载依赖失败”

Flutter 01 – 基本介绍、Windows 上面搭建 Flutter Android 运行环境