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

一、基本介绍

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 根目录:

编辑系统变量

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

;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 

2、电脑上下载安装 Android Studio

下载安装 Android Studio


Android Studio图标

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

1. 下载 Flutter SDK

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

Flutter SDK 安装目录

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

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

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

Flutter 国内的镜像环境配置


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

检测环境是否配置成功

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

错误提示

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

flutter doctor --android-licenses

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

解决错误

6、打开 Android Studio 安装 Flutter 插件

选择插件菜单
搜索 flutter 插件
安装 flutter
安装 Dart 插件
重启 Android Studio

 7、创建 Flutter 项目

选择 Flutter 项目
选择 Flutter App 项目
设置路径
配置

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

open an existing Android Studio project
下载 gradle 压缩包
已下在 gradle 压缩包
使用 gradle

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

重新下载 Gradle

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

暂不更新
连上手机真机调试

 9、可能遇到的错误

Gradle 提示
下载 Gradle 失败

下载 Gradle 失败解决方案:

1. 开启手机热点重试

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342