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代表全速。

你可能感兴趣的:(Flutter学习笔记第一课-环境搭建)