Flutter实践——AndroidStudio环境初体验

  这是一篇菜鸟萌新初次上手Flutter的实践过程记录,老鸟请自行略过哈~最近大家都在说Flutter,还不是因为Google爸爸刚刚发布了Flutter 1.0 版本,简单了解了下,类似于微信小程序等等的一种跨平台解决方案,操作流畅度据说不管是iOS,还是Android,都可以“如丝般顺滑”,这么腻害?赶紧入坑看一看~

Flutter简介

  简介啥的自己查一查看看就好,不过这一篇还是比较好的,传送门:Flutter - 不一样的跨平台解决方案 。老实说这篇实践就是根据它来的,哈哈哈哈,感谢大佬!

Flutter安装配置

  本文介绍的是在Windows10系统上AndroidStudio中安装配置Flutter的方法和步骤,其他系统环境欢迎查看参考文献1.
  Flutter中文网是个不错的网站,居然有中文文档不错不错,自学能力不错的可以自己捣鼓。首先,要添加环境变量到自己的用户环境变量中。国内访问Flutter有时可能会受到限制(会科学上网的可自行忽略),Flutter官方就为中国开发者搭建了临时镜像下载window版本的Flutter资源文件,大家可以将如下环境变量加入到用户环境变量中:

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

  这个是Linux系统的命令,在windows系统中也很简单,就是配置环境变量:

image1.png

image2.png

注意:这镜像还只是临时的,万一哪天和组织联系不上了,还有组织留下的线索——Using Flutter in China
上面环境变量设置完之后就可以开始下载Flutter安装包了。
Using Flutter in China这个网址不仅有官方下载原地址,还有镜像下载地址:
Original URL:
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip
Mirrored URL:
https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip
我是用镜像地址下载的,速度很快,亲试有效。
不仅如此,这个网址还提供了上海交通大学的镜像地址,如果之前设置的地址不能访问,可以设置这个地址,设置方法和之前环境配置一样:
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn/
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
  将Flutter下载完成之后,将其解压放在权限较低的文件目录中,不建议放在X:/Program Files目录下,建议放在别的目录中:
image3.png

  然后进入目录中,双击打开 flutter-console.bat ,进入Flutter命令行窗口:
clipboard.png

图中可以看出怎样在cmd中直接运用flutter的命令,无非就是将flutter的路径添加到系统环境变量中。
  输入命令检查Flutter安装情况:

flutter doctor

出现XX或者!的地方都是有问题的,比如说我这里有4个问题:

  • Some Android licenses not accepted
  • Flutter plugin not installed
  • Dart plugin not installed
  • No devices available
clipboard1.png

第一个问题,只需要如图中所示执行下面命令,然后一路输入“y”同意即可:

flutter doctor --android-licenses

在这里我遇到了一个问题,提醒说

A newer version of the Android SDK is required. To update, run:
/Users/iOSCMB/AndroidStudio/SDK/tools/bin/sdkmanager --update

但是当我在命令行中执行这个命令的时候,又报错。报错信息是:

Warning:An error occurred during installation:Failed to move away or delete existing target file: D:\User\XXX\Android\SDK\tools
Move it away manually and try again..

千万不要按照它所说的把这个目录给删除,这是没有给Android SDK授权的原因,我们可以在命令后加 -v 来查看更详细的报错信息:

sdkmanager --update -v
22.jpg

根据它所说的,先给它授权,执行下面的命令:

sdkmanager --licenses

然后一路授权就可以了。


menu.saveimg.savepath20181228224925.jpg

接下来的两个问题就要在AndroidStudio中解决了。

AndroidStudio安装Flutter和Dart插件

  在安装这两个插件之前,确保自己的AndroidStudio版本在3.1以上,我自己用的是3.2.1的版本,打开File—Settings—Plugins,在搜索框中搜索Flutter,点击install进行安装,Dart插件会一并进行下载安装。如果无法下载,可以将File->Settings->Apparence & Behavior->System Settings->Updates->use secure connnection 勾去掉,我就出现了这个问题,去掉之后就可以下载插件了。
  都安装之后重启IDE,就可以发现New下面多了创建Flutter Project入口:


image4.png

这就说明安装成功,然后连接手机,打开USB调试,再输入flutter doctor进行检测,就会发现没有问题了。

Flutter Hello World

  建议编写Flutter程序在AndroidStudio工具上进行,与Android开发类似,支持断点调试等。在用AS正式开始之前要配置一下Flutter的SDK,如图所示:

7.jpg

上述完成之后,就可以正式开始了。新建一个Flutter Project时,有四种方式:Flutter Application、Flutter Plugin、Flutter Package、Flutter Module
image5.png

这里直接选择默认第一个Flutter Application就行,进去之后大概就是这个样子:
image.png

  这里有一定的概率会卡死在创建项目的界面,可以唤起资源管理器强制停止,然后再重新从创建好的flutter项目中打开,根据指引 run 一下dart的资源就可以了。
注意:连接真机后部署,可能会部署很长一段时间,卡在 initializing gradle 很久,这是因为它默认是要下载最新的Gradle版本的,而不是科学上网的你...就需要等很久很久,如果你打开你的C:\Users\你的用户名.gradle\wrapper\dists 就会发现多了存放最新Gradle版本的一个文件夹,比如我就多了“gradle-4.10.2-all”这个文件夹,最简单的方法就是将这个新建Flutter项目所用的Gradle版本设置成已有的Gradle版本,这里我改成了已有的gradle-4.6的版本。当然也可以用文献4的方法进行修改。若是硬要使用最新的gradle版本也可以,文献5亲试有效,这里不详细说明了,自行翻阅即可。
image.png

  OK,到此就可以成功部署了,我感觉部署的时间还是有点长的,不知是不是第一次编译的原因。Enjoy Yourself !
8.jpg

参考文献

1、Flutter - 不一样的跨平台解决方案
2、Using Flutter in China
3、android studio 无法下载插件
4、Flutter在Android Studio上的初启动
5、解决AndroidStudio下载gradle慢的问题

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

推荐阅读更多精彩内容