Flutter入门(一)环境配置

关于混合开发,市面上的现在基本几种:webview+html、rn、weex、kotlin、flutter。

h5、rn之前都使用开发过多个产品,也很了解这两者的优劣,weex、kotlin只是大概了解过,而flutter之前看过,但感觉dart语法很不友好,当时也没有太接触。
最近看了一下关于rn、flutter的对比,于是想重新了解一下。

关于flutter

flutter是google推出的一款ui移动框架,可以快速在iOS和Android上构建高质量的原生用户界面,是基于dart语言,不需要像rn通过连接器与js通讯,性能比rn更胜一筹(未验证),在github的start数40000+,react-native的start数是70000+。

环境搭建

参考flutter中文网(https://flutterchina.club/get-started/install/)

1、下载flutter sdk

直接去官网下载可能下不下来,可以通过git下载

先设置镜像
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

***git clone -b beta https://github.com/flutter/flutter.git***

// 如果觉得这个下载下不下来或者太慢,可以通过下面这个国内码云地址
***git clone https://gitee.com/mirrors/Flutter.git***

2、设置环境变量

下下来flutter 后进入flutter目录可以看到bin目录。

将/flutter/bin设置到环境变量的path中。

在/flutter/bin目录下执行 flutter doctor命令。

3、android studio插件

下载android studio就不说了,打开android studio/file/setting/plugin/


plugin.png

输入 flutter查找并install。
第一次可能下不下来。我的电脑第一次就没下下来,是回家后打开电脑重新下载才下下来的,猜测可能是下载完flutter sdk、或者配置flutter环境变量后需要重启电脑。

在安装完插件并重新启动android studio就可以在 file/new/中看到一个新选项 New Flutter Project


flutter.png

hello word

按照惯例,接下来我们跑一个hello world。

照上面的new/new Flutter Project 然后 next、next、next一个新项目就建好了。

项目目录

flutterRun.png

项目目录和rn目录类似,android、ios原生工程。lib放混合开发的dart文件,
pubspec.yaml项目的配置文件,类似于rn、react中的package.json,声明项目版本、依赖等。
在运行后如android,会在项目根目录的build(和android同目录)下生成构建之后的文件,这一点和rn以及之前的android项目很不一样,之前的androidbuild都是在/app/build/目录下。

运行

点击上面截图右上角绿三角run,第一次运行会比较慢。main.dart是主入口的混合文件。我们可以修改截图中间的文本内容,再运行

hello.png

第一次运行结束,后面就需要熟悉dart语法,查看原生里的源码看实现原理。

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