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语法，查看原生里的源码看实现原理。