第1章 Flutter开发环境搭建

1. 简介

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter会对比之前的描述, 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
Flutter的第一个版本被称为“Sky”,运行在Android操作系统上。1.0版本于2018年12月5日(北京时间)发布。未来预计应用在Google的新操作系统Fuchsia上。

2. Flutter环境搭建

2.1 设置镜像

在使用Fultter指令时,有些时候会联网下载依赖资源。在国内通过Flutter访问网络有时会不稳定,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

以windows版为例,找到“环境变量”,在“用户变量”中新建以下两个环境变量


PUB_HOSTED_URL
FLUTTER_STORAGE_BASE_URL

环境变量

此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

2.2 系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
  • 命令行工具: Git for Windows和Windows Power Shell

如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。如果是32位的Windows系统,请将Program Files换成Program File (X86)

2.3 安装Flutter SDK

2.3.1 下载Fullter安装包

在Fultter官网上下载最新可用安装包,最好使用stable稳定发布版

  • Flutter下载页面
    根据操作系统选择合适的安装程序

    点击“Windows”进入下载页面
    点击蓝色按钮进行下载

    因为网络不稳定原因,有时蓝色按钮可能显示“Fail”,请多次刷新页面尝试

2.3.2 解压Fullter安装包

将下载后的安装包解压,路径中最好不要有中文和空格,不要使用系统中需要高授权的路径

解压后的flutter文件夹

2.3.3 配置环境变量

在“环境变量”中“用户变量”的Path中,追加“flutter\bin”的完整路径。如果没有Path可以进行新建


新建Path


在已有Path中追加
2.3.4 运行flutter doctor指令检查依赖

目前只能在命令行提示符(cmd)或Windows Power Shell中执行flutter doctor指令。
第一次运行flutter doctor指令时,它会下载它自己的依赖项并自行编译,时间可能较长。如果没有在2.1小节配置flutter的镜像环境变量,指令可能运行失败。

依赖检查

3. Android Studio中Flutter项目环境搭建

3.1 Android SDK

在第2小节中执行flutter doctor指令后发现系统中没有安装Android SDK,这时需要安装它。

3.1.1 Android SDK安装

访问官网下载Android SDK,由于网络不稳定原因,大部分时间无法访问Android SDK官网,请利用稳定网络资源进行下载。
注意:安装路径上不要有中文和空格

Andriod SDK路径

如果真机调试程序可以不安装System Image以节省安装时间


System Image是虚拟机,如果真机联调可以不安装

运行SDK Manager.exe下载Android开发环境,点击“Install x packages”进行下载安装


点击Install进行安装

选择“Accept License”并点击“Install”进行安装


接收许可并安装

等待安装进度完成


等待安装进度

安装完成,所选项的status变成“Installed”


安装完成

配置ANDROID_HOME环境变量
在“环境变量”的“用户变量”中新建变量“ANDROID_HOME”,将Android SDK的安装路径设置为变量的值


ANDROID_HOME环境变量

在“环境变量”的“用户变量”中的Path中追加路径

  • %ANDROID_HOME%\tools
  • %ANDROID_HOME%\platform-tools


    Path中追加路径
3.1.2 Flutter中确认Android SDK安装

打开Windows Power Shell执行指令"flutter doctor"


执行flutter doctor

发现已经获得到了Android SDK的版本,但提示一个错误“Android license status unknown”。其指的是“没有接受Android的许可”

执行指令"flutter doctor --android-licenses"

  • 如果提示多个确认(y/n),请一直输入“y”至结束
  • 如果提示如下图


    错误提示

请输入提示"地址+.bat --update"。
上图输入的就是"D:\Android\android-sdk\tools\bin\sdkmanager.bat --update"
此时会提示选择“y/n”,输入y后回车确认,可能需要等待一小段时间。

确认license

重新执行指令:”flutter doctor --android-licenses
应该不会再出现“Android license status unknown”错误

如果问题仍然存在
可能出现根据下图所示可能是移除tools文件夹时出现问题

错误原因

解决办法

来到路径指向的文件夹,将其中tools更改为tool。


更改tools为tool

在Windows Power Shell中执行指令“D:\Android\android-sdk\tool\bin\sdkmanager.bat --update”,等待系统生成新的tools文件夹和其中的内容,这可能会花费一段时间。

生成了新的tools文件夹

在Windows Power Shell中重新执行指令flutter doctor --android-licenses
会提示多次选择(y/n)的操作,一律输入"y"

提示确认,输入y回车

全部确认后,重新执行指令flutter doctor
可以看到错误“Android license status unknown”消失。

Andorid SDK通过flutter doctor指令

3.2 Android Studio

3.2.1 下载和安装Android Studio

访问Android Studio官网下载Android Studio
Android Studio官网下载地址: https://developer.android.google.cn/studio

点击下载

下载后正常安装即可,安装路径不要有中文和空格。
检查Android SDK配置
点击"Configure"->"Project Defaults"->"Project Structure"

Project Structure

在打开窗口中查看,Android SDK location设置是否正确


Android SDK location设置

依赖检查
打开Windows Power Shell运行“flutter doctor”检查依赖,可以看到Android Studio已经安装,但提示缺少“Flutter”和“Dart”两个plugin(插件)。

依赖检查

3.2.2 下载Flutter和Dart插件

打开“Configure”->"Plugins"


打开插件管理

搜索dart,建议先安装dart插件,再安装flutter插件。由于网络不稳定原因,搜索可能会支持一段时间或者提示没有搜索到结果。请耐心多试几次。
也可以通过访问网站下载离线安装包
http://plugins.jetbrains.com/androidstudio
下载离线安装包时请确认好IDE与安装包的版本是否吻合
通过点击“Get Help”中的“About”来确认版本

确认版本183.5

在网站上选择合适的版本下载(更细致的版本号请忽略)


版本183.5

下载好离线安装包后,通过点击“齿轮”中“Install Plugin from Disk”,选择下载好的zip文件即可安装


安装离线插件

检查安装后的插件,确认后重启Android Studio


image.png

检查依赖
打开Windows Power Shell,输入“flutter doctor”检查依赖。发现插件错误也解决了。

检查依赖

3.3 创建flutter项目和联机调试

3.3.1 创建flutter项目

安装Dart和Flutter插件后,重启Android Studio看到可以创建Flutter工程


创建Flutter工程

点击“Start a new Flutter project”创建一个Flutter工程
选择工程类型
第一个是App应用
第二个是插件开发
第三个是Widget(组件)开发
第四个是为Android或IOS的APP提供Module

项目类型

工程名字
选择第一个App应用开发后,点击“Next”,填写工程名字等基本信息

填写工程名字

package名字
填写工程名字后,点击“Next”,填写package名字

填写package名字

点击Finish完成创建,进入编辑页面

工程目录结构
main.dart是核心启动文件

工程目录结构

3.3.2 联机调试

工具台

工具台说明

真机联调
通过手机连接USB进行调试,首先要确保在Android SDK Manager中安装了“Googel USB Driver”

Google USB Driver

通过USB连接手机,在手机上的设置中打开“开发者选项”和其中的“USB调试”。等待计算机安装手机驱动后,如果工具台还显示“<no devices>”,请重启Android Sutdio

在Widows Power Shell中执行“flutter doctor”,发现没有问题存在


检查依赖

执行程序
点击“执行”

执行程序

运行效果


运行效果

设备连接异常

  1. 是否为“文件管理”模式
  2. 是否打开了“开发者选项”
  3. 是否打开了“USB调试”
  4. 是否正确的安装了的手机驱动
  5. 打开cmd,是否能正常执行adb指令,若adb指令提示缺失“api-ms-win-crt-runtimel1-1-0.dll”。在windows7 sp1操作系统中,需要vc环境支持,需要下载vc_redit.exe
    https://www.microsoft.com/zh-cn/download/details.aspx?id=48145

gradle异常
运行时如果
Initializing gradle时出现异常

"xxxx\gradlew.bat" exited abnormally (xxxx为路径)

根据提示的网址下载zip包并放入异常指向的目录即可
一般目录为:C:\Users\计算机用户名\.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv(可能是其他的序列)

adb.exe已停止工作
在使用真机调试的时候碰到了adb.exe 已经停止工作的错误。由于adb的默认端口5037,被其他程序占用了。
在cmd中输入 netstat -ano|findstr "5037",寻找占用5037端口的PID
在任务管理器中寻找PID为5037的进程,结束进程或卸载相关程序即可。

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

推荐阅读更多精彩内容