Flutter学习笔记第一课-环境搭建

一、了解一下Flutter

Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，这无疑能为用户提供良好的体验。

跨平台：

Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。 相反，Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

原生用户界面：

它是原生的，让我们的体验更好，性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知，为您的用户带来全新的体验。

二、Flutter开发环境搭建Windows版

下载安装 FlutterSDK

1.下载地址:https://flutter.io/sdk-archive/#windows将安装包zip解压到你想安装Flutter SDK的路径（如： E:\flutter；注意：不需要将flutter安装到一些高权限的路径如C:\Program Files)
2.设置环境变量，Flutter的执行是要进行联网的，由于国内的原因，所以你需要设置环境变量

export PUB_HOSTED_URL=https://pub.flu tter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

如果你想在任何地方都可以执行Flutter命令，你需要把Flutter SDK的目录配到环境变量中的path条目下
3.进行Flutter doctor 的测试，打开终端执行flutter doctor，会报如下错误

Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

下一步就去安装Android studio

下载安装 Android Studio

1. 下载Android Studio：直接到官网进行下载就可以了。下载地址：https://developer.android.com/
2. 安装Android Studio 软件：安装完后打开Android Stuido 软件，然后找到Plugin的配置，搜索Flutter插件。安装完成后，你重新启动一下Android Studio。

安装Android证书

安装好Android Studio后，再次打开终端输入flutter doctor --android-licenses安装证书

安装AVD虚拟机

1.打开Andorid Studio ，新建Flutter项目。
2.找到菜单栏中tool - AVD Manager选项，选择Create Virtual Device，选择你喜欢的虚拟机类型。
3.安装好后，点击开始按钮，运行虚拟机

运行Flutter程序

如果你是1.0以下的版本，可能会报Error running Gradle错误，如下

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties

Finished with error: Please review your Gradle project setup in the android/ folder.

这个坑已经踩过了，已经找到解决办法，只需要修改掉项目下的android目录下的build.gradle文件，把google() 和 jcenter()这两行去掉，改为阿里的代理链接。

buildscript {
    repositories {
        //google()
        //jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

allprojects {
    repositories {
        //google()
        //jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
    }
}

如何使用VS code进行开发

到这里，基本可以运行起来了，但是用Android Studio来进行开发的话，感觉它太重量级了，还是习惯了用VS code并且VS code已经有了Flutter插件，搜索安装即可。
安装完导入项目，打开VS code终端输入命令flutter run开启预览

如何快速开启虚拟机

如果使用VS code开发的话，打开虚拟机的可以直接通过快捷方式打开，不再通过打开Android Studio，然后再去打开AVD虚拟机。
开启虚拟机需要两个步骤：
1.新建一个xxx.bat文件到桌面，xxx输入自己取的名字
2.查找emulator.exe文件的路径，然后把emulator.exe文件的路径 + 你安装的虚拟机名称放到bat文件中，如下

C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_4_API_26

保存后双击bat文件，就可以迅速打开虚拟机了
参数解释：
-netdelay none :设置模拟器的网络延迟时间，默认为none，就是没有延迟。
-netspeed full: 设置网络加速值，full代表全速。