欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Flutter入门(一)环境配置

发表日期:2018-10 文章编辑:小灯 浏览次数:2039

关于混合开发,市面上的现在基本几种: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语法,查看原生里的源码看实现原理。


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/18075.html
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.