Flutter开发环境搭建Windows版

参考链接:jspang.com/post/flutte…

JAVA环境的安装

  • 下载JDK,JAVA环境jdk下载地址:www.oracle.com/technetwork…, 安装完成到终端(命令行)里输入java,进行检测。

下载安装 FlutterSDK

  • 去官网下载Flutter安装包,下载地址:flutter.io/sdk-archive…

  • 将安装包zip解压到你想安装Flutter SDK的路径(如: E:\fluter\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。

  • 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

  • 如果你想在任何地方都可以执行Flutter命令,你需要把Flutter SDK的目录配到环境变量中的path条目下。

进行Flutter doctor 的测试

 双击flutter_console.bat,在打开的终端中输入flutter doctor,
 当全部为`V`时,表示环境已配好。因为现在有好多还没下载安装,所以`X`会比较多。
复制代码

Android Studio的安装

  • 下载Android Studio:直接到官网进行下载就可以了。下载地址:developer.android.com/ 进入后向下拉,然后点击下载按钮。
  • 安装Android Studio 软件:这个安装差不多都是下一步下一步。

打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。

点中间的Search in repositories,然后点击安装。安装完成后,你需要重新启动一下Android Studio软件。

安装Android证书

  • 安装好Android Studio后,再次打开终端(命令行),输入flutter doctor,这时候的x会明显减少,但是你还是会遇到1-2个,其中有一个就是提示没有安装证书。安装证书只要在终端里执行下面的命令。

      flutter doctor --android-licenses
    复制代码

    然后会提示你选Y/N,不要犹豫,一律选择Y,就可以把证书安装好。

安装AVD虚拟机, 让Flutter跑起来

  • Android studio新建Flutter项目

  • 打开第二个窗口后,选择第一个选项Flutter Application(flutter应用)。

  • 这步完成后,系统就会自动为我们创建一个Flutter项目(新建项目的过程也是很慢的,它要去谷歌下载gradle,这个东西很容下载失败,如果失败,可以多反复试几次)。

  • 安装AVD虚拟机

      1.现在需要一个虚拟机来运行我们的程序,可以点击Android Studio
      中的上方菜单tool -AVD Manager选项。
    复制代码

    2.点击Create Virtual Device.....
复制代码

    3.选择虚拟机类型,这个你随意选就好,我选择的是Nexus 5x
复制代码

    4.选择系统,这里尽量选择最新的,我选择了Android 9.0系统,
    选择好后,又是一个漫长的等待过程。
    5.安装好后,点击开始按钮,运行虚拟机了(第一次运行,需要安装系统,会慢一些),运行起来后,如下图。
复制代码

VSCode下玩转Flutter

  • 打开VSCode的Flutter插件界面,然后用在搜索框中输入Flutter,第一个就是Flutter插件了。点击install就可以进行安装了

一条命令快速开启虚拟机

 查找emulator.exe文件的路径
复制代码

我的emulator.exe文件的路径为C:\Users\wangtingting1\AppData\Local\Android\Sdk\emulator\emulator.exe(AppData文件夹有可能会被隐藏,如果找不到,请试试以下方法)

  • 打开Android Studio,并查看你的AVD虚拟机名称

  • 新建bat文件,根据虚拟机名称和文件路径,把bat文件输入成如下形式。

      C:\Users\wangtingting1\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28
    复制代码

    别忘记下划线,进行保存后双击bat文件,就可以迅速打开虚拟机了。

flutter run 开启预览

现在模拟器也有了,VSCode也支持Flutter开发了.现在可以在VSCode中直接打开终端,
快捷键是ctrl+~,然后在终端中输入下面的命令。
flutter run
经过短暂的编译后就会启动我们的程序了
到此处,终于搭建出了适合前端程序员的开发环境
复制代码

我在搭建环境时遇到的问题如下

第一个

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' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        }
        dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}
allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}
rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

复制代码

第二步:修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化。比如我放在了D盘Flutter目录下,那路径就是这个。

D:\Flutter\flutter\packages\flutter_tools\gradle
复制代码

打开文件进行修改,修改代码如下(其实也是换成阿里的路径就可以了)。

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}
复制代码

然后再重新Debug一下,就基本可以启动起来。

还有一种错误是说硬件没有启动GPU,需要下载安装一个程序,这个提示的很清楚,不做过多的介绍了。

你可能感兴趣的:(Flutter开发环境搭建Windows版)