Flutter环境配置(一)

前言

近年来随着Android岗位的逐渐饱和，Android的从业要求越来越高,很多招聘岗位要求会Flutter，比如boss直聘上：

 

---

以后大前端是移动端未来的大趋势，混合开发目前也进行的热火朝天，但是重所周知的原因，

H5页面有缺点也有优点

缺点：用户体验，性能，以及加载速度还有交互和原生还是有差距，很多功能和效果还无法实现，

主要是如下两个方面：

第一个是前端页面代码渲染速度

图片加载速度，JS脚本 的解析效率，以及不同版本和不同厂家对Android手机的定制开发和处理器不同

造成加载速度比较慢，经常会出现页面2-3秒空白loading情况，这是现在用户无法忍受的

第二个资源加载缓慢

H5 页面是从服务器上下发的，根据网络状况的不同，H5 页面的体验和 Native 在很多情况下相比差距还

是不小的，但是这种问题从某种程度上来说也是可以弥补的，比如说我们可以做一些资源预加载的方案，

在资源预加载方面，其实也有很多种方式，比如js加载时机，页面图片懒加载等

优点：热部署更快，比如电商活动页面，随时更换，马上生效，具有跨平台的能力，一份代码，可以同时

在公众号，Android，IOS上运行，体积也比一些原生apk体积小

PS：文章默认有福利哦！

 

Flutter推出说明

所以谷歌推出了Flutter，百度百科上对Flutter介绍如下：

Flutter是谷歌的移动UI框架 [4]  ，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与

现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开

源的。它也是构建未来的Google Fuchsia [1]  应用的主要方式。

Flutter的第一个版本被称为“Sky”，运行在Android操作系统上。它是在2015年Dart开发者峰会 [3]  上亮相的

，其目的是能够以每秒120帧的速度持续渲染。

Beta

Beta1版本于2018年2月27日在2018 世界移动大会公布 [5]  。

Beta2版本2018年3月6日发布 [6]  。

1.0版本于2018年12月5日(北京时间)发布 [7]  。

所以有了今天这篇Flutter的入门安装教程:

---

目录

目录

1：起步(配置Windows环境)

2：配置编译器

3：体验第一款Flutter app

正文

1：起步

2 运行第一款Flutter代码

---

目录

1：起步(配置Windows环境)

2：配置编译器

3：体验第一款Flutter app

 

 

正文

1：起步

因为笔者的系统是Windows系统，所以我们以Windows系统为例开始环境打搭建

1：使用镜像

国内直接访问Flutter会受限，所以Flutter给我们部署了Flutter的镜像环境,配置镜像需要配置用户环境变量

1.1  打开环境变量-用户变量(不是系统变量)-分别添加2个变量(如果没有)-确定保存

变量名：PUB_HOSTED_URL                          变量值：https://pub.flutter-io.cn

变量名：FLUTTER_STORAGE_BASE_URL   变量值：https://storage.flutter-io.cn

1.2  获取Flutter的SDK

打开下面链接：https://flutter.dev/docs/development/tools/sdk/releases#windows

里面有SDK的版本和更新，分为Stable  channel ，Beta channel，Dev channel三个版本

初学建议大家下载Stable版本，免得刚开始学习中出现无法解决的问题，等完全熟悉了，就可以直接下载

Beta channel版本，当然也可以直接GIT，下载SDK依赖，命令如下：

git clone -b master https://github.com/flutter/flutter.git

下载后解压(git 命令下载不需要),最后别解压在高权限目录，比如C:\Program Files\，我直接解压在F盘

1.3 配置SDK 环境变量

还是刚才用户环境变量，在Path后面新增刚才解压后的bin文件路径,我的是如下路径，大家根据自己解压

路径配置即可：

path路径：F:\flutter\flutter\bin，

然后打开F:\flutter\flutter目录下的flutter_console.bat双击，命令行输入：

flutter doctor，下面打钩的是代表已经按照的flutter的版本信息，对应编译器版本(Android studio3.4)，和

Android设备连接

PS:第一次运行因为要加载默认依赖项目并加载，所以比较慢，耐心等会儿，再次加载就快很多

1.4 配置编译器

我使用的是Android studio3.4(https://developer.android.com/studio/index.html 需要科学上网)版本作为

Flutter开发工具(Android studio安装教程请谷歌很多，不在本篇文章讨论范围),以下简称AS:

      1.4.1 首先需要下载Flutter插件

       需要安装两个插件:

• Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
• Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).

AS-File-setting-Plugins 搜索flutter 第一个搜索结果就是，点击Install-会弹出一个弹框提示, 意思是安装

flutter前还需要安装Dart插件支持-直接Yes-下载完-Restart，编译器对应的flutter插件就安装成功

     1.4.2 连接设备

    手机需要Android 4.1（API level 16）或更高版本的Android设备，测试设备，我们直接连接手机到电

脑在Android studio的Terminal控制台定位到fluter sdk路径，比如我本机是F:\flutter

F:\flutter>flutter devices
No devices detected.

Run 'flutter emulators' to list and start any available device emulators.

Or, if you expected your device to be detected, please run "flutter doctor" to diagnose potential issues,

or visit https://flutter.dev/setup/ for troubleshooting tips.
连接失败会提示没有监测到设备，动下useb连接线在执行下flutter devices

F:\flutter>flutter devices
1 connected device:

Coolpad Y75 • 276bca0c • android-arm • Android 4.4.4 (API 19)
代表连接成功，可以愉快的开撸了。

 

2 运行第一款Flutter代码

 2.1 Flie-New-New Flutter Project-Flutter Application

一步步默认，项目名称随便取(my_flutter)，但是！

注意：项目名称必须lower_case_with_underscores，小写

或者带下划线开头必须是小写字母，中间可以有下划线和数字，不能有大写字母

 2.2 运行Flutter项目

创建完成后，默认是有一个Flutter项目的，lib里面只有一个文件main.dart,

里面是默认给的一个功能点击一次后界面数字更新一次

 2.3 Instant Run

热更新按钮，工具栏上闪电图标那个家伙，，这个第一次运行后再hot swap，界面瞬间刷新，

as2.0之后的新功能

PS:有个问题应该是版本的问题，我的4.4版本运行后热更新按钮无法点击，换7.1的手机就可以点击，

应该是版本支持的问题，哪位童鞋解答下，最后作为福利送给看了这么久的小伙伴，大家留言喜欢哪一个呢？

本文参考:https://flutterchina.club/get-started/install/ Flutter 中文网