Flutter初体验之-环境搭建

Flutter可能是我们做移动端或者前端听的比较多的一个名词。目前前端和移动端都趋向于向大前端发展。我们都知道由于Android ios 前端的运行环境、发开语言、平台特性的不同，导致同时学习三个平台的学习成本是极高的。所以React Native 、Weex等跨平台技术应运而生了，而这些跨平台技术由于偏高层解释性的特性就会出现运行效率和对原生依赖度高耦合性高等问题。随着2018年flutter beta1正式发布，一种更优美更高效的跨平台技术进入我们的视线。

汉源网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

但是RN也并没有被广泛的接纳，从阿里开始使用到放弃，里面的很多坑都绕不过去。写一次到处跑确实很诱人，从企业角度讲，可以节省大量的人力，但是却忽略了一个很基础的问题，不同平台是否希望如此，苹果是否会愿意自己的生态被打破，不同平台的特性是否应该被归为一致。

vscode flutter 环境搭建

环境准备阶段：

android-studio 版本：android-studio-ide-191.5977832-windows.exe 3.5.2

flutter版本：stable 版本 （完成系统环境变量 path配置）

dart版本：2.12.0 （完成系统环境变量 path配置）

完成相关软件安装。

配置flutter相关SDK及andriod studio路径：

flutter config --android-sdk="C:\Users\Administrator\AppData\Local\Android\Sdk"

flutter config --android-studio-dir="D:\Program Files\Android\Android Studio"

执行flutter doctor运行成功。

夜神模拟器地址：D:\Program Files\Nox\bin （完成系统环境变量 path配置）

andriod SDK tools：C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools （完成系统环境变量 path配置）

nox_adb.exe connect 127.0.0.1:62001

dart SDK:D:\software\dartsdk-windows-x64-release\dart-sdk\bin

将C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 下面adb.exe 复制至D:\Program Files\Nox\bin覆盖

adb.exe，此外重新复制adb.exe命名为nox_adb.exe，替换原有的nox_adb.exe。

cdm 输入nox_adb version 及adb version发现版本一致。

启动野神模拟器，输入adb devices发现虚拟设备，执行flutter devices发现 127.0.0.1:62001 设备。

修改C:\learn_flutter\first_flutter\android\gradle\wrapper\gradle-wrapper.properties

distributionUrl=

修改C:\learn_flutter\first_flutter\android\build.gradle

buildscript {

ext.kotlin_version = '1.3.50'

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

allprojects {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\flutter.gradle

buildscript {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

dependencies {

classpath 'com.android.tools.build:gradle:4.1.0'

}

}

//private static final String DEFAULT_MAVEN_HOST = " ";

private static final String DEFAULT_MAVEN_HOST = " ";

修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle

repositories {

google()

jcenter()

maven {

//url "$storageUrl/download.flutter.io"

url " "

}

}

执行 flutter run启动成功。

环境搭建坑点在于JDK兼容问题以及网络问题。

4. VS Code创建flutter项目

如果和我一样，用惯了VS Code来开发项目的话，那就跟我一起来配置一下如何在VS Code里运行flutter项目。

1.在VS Code里安装扩展：

2.在VScode上打开打开终端，快捷键：Ctrl+~（Tab上一个键），在终端上输入：flutter create flutter_app02，即可创建完成！

也可以把之前的项目放到工作区

3.在终端中运行命令：flutter run

运行的时候你会发现手机提示你安装个app，点击安装完成，项目就在手机上显示了，下图是运行成功的提示。

下图是手机效果：

如果报错的话，运行下清缓存的命令：flutter clean，把文件夹.gradle删掉，然后flutter run重新跑下项目。