无魔法版win11搭建flutter开发环境搭建详解

3,417 阅读5分钟

flutter版本

Flutter 3.13.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ead455963c (6 days ago)2023-09-26 18:28:17 -0700
Engine • revision a794cf2681
Tools • Dart 3.1.3 • DevTools 2.25.0

步骤

无需独立搭建dart环境,flutter环境包含dart环境

安装git

git官网,下载安装包,除了修改git安装目录外(建议改在系统盘之外),其余都用默认配置即可,一直下一步,直至安装完毕. 此时应该会将git的bin目录自动加入到系统的PATH路径,如果没有则需要自己手动加下

搭建java开发环境

安装java sdk, 配置JAVA_HOME环境变量

搭建android开发环境

下载Android Studio, 安装时注意要选择自定义安装,将Android StudioAndroid SKD安卓模拟器,安装在系统盘之外的地方,因为占用的空间会很大

注意点:

  • Android Studio安装完毕之后,立刻启动,然后稍等一会,会检测google相关的网络链接,此时,国内环境,需要设置代理: https://mirrors.aliyun.com/android.googlesource.com/,设置完之后,点击OK保存,虽然后续还是会不停的提示google相关url无法访问,让你再次设置代理,但,此时就可以忽略,这个提示了。

image.png

  • Android Studio首次启动跳过配置(不要让其自动下载Android SDK)
  • Android Studio跳过了首次启动的配置之后,在项目界面,配置需要下载的Android SDK模拟器以及镜像, 如下三个选项卡都操作完毕之后,再点击OK进行确认,此时就会开始下载和安装Android SDK以及模拟器相关的程序, 等下载安装完毕之后,Android环境算是搭建好了

image.png

image.png

image.png

image.png

安装Visual Studio

注意,安装时尽量将其安在系统盘之外, 因为这个编辑器很大

从微软下载个人版即可,需要选中使用C++桌面开发

P.S. 仅需要选中使用C++桌面开发开发,其他都可以去掉勾选,但Windows的SDK必须全部勾选

image.png

这几个钩补选上

image.png

安装VSCode,并安装flutter, code runner, Gradlecmake插件

VSCode从官网下载即可,安装完毕之后,添加相关插件

image.png

image.png

image.png

image.png

image.png

安装flutter SDK

从官网下载flutter SDK, 并解压到你喜欢的位置(目录名不要包含中文,空格,以及特殊字符)

让后将flutter_home/bin目录,配置到环境变量

在终端输入:flutter --version检查版本

image.png

在终端输入flutter doctor检查依赖环境是否都有了

国内可能的问题:

  • https://maven.google.com/无法访问
  • https://pub.dev/无法访问
  • https://storage.googleapis.com/无法访问

解决方案:

替换flutter\packages\flutter_tools\lib\src\http_host_validator.dart 目录下的'maven.google.com''https://dl.google.com/dl/android/maven2/'

image.png

使用PowerShell设置环境变量

在你喜欢的位置创建一个用于存储dart/flutter第三依赖的目录(如:E:\PUB_CACHE)

setx PUB_HOSTED_URL "https://pub.flutter-io.cn"
setx FLUTTER_STORAGE_BASE_URL "https://storage.flutter-io.cn"
setx PUB_CACHE "E:\PUB_CACHE"

image.png

其他可能的问题

flutter Error: Unable to find git in your PATH.

flutter Error: Unable to find git in your PATH._修罗_的博客-CSDN博客

flutter sdk目录加入, git安全目录

如: git config --global --add safe.directory C:/src/flutter

注意目录分割符

Android SDK安装成功,但fluter无法找到Android SDK

通过命令行直接配置Android Sdk的绝对路径,如下

flutter config --android-sdk "D:\Android\Sdk"

同意Android相关的licenses

命令行输入如下命令,并一路同意

flutter doctor --android-licenses

安装成功之后,执行flutter doctor的效果

image.png

创建第一个项目,验证环境是否真的可用

通过命令行创建项目

flutter create my_app

运行项目

windows桌面开发环境

flutter run -d windows

此时会通过网络下载实际的依赖,然后使用Visual Studio进行编译,然后运行

Visual Studio编译可能会遇到找不到Windows SDK的问题:

 error MSB8036: 找不到 Windows SDK 版本 10.0.20348.0。请安装所需版本的 Windows SDK,或者在项目属性页中或通过右键单击解决方案并选择“重定解决方案目标”来更改 SDK 版本。

image.png

解决方案:搜索UAP.props文件, 并将

因为错误提示中有给出SDK的版本信息Windows SDK 版本 10.0.20348.0, 因此要修改对应版本的UAP.props文件

image.png

<WindowsSdkDir>$([MSBUILD]::GetDirectoryNameOfFileAbove('$(MSBUILDTHISFILEDIRECTORY)', 'sdkmanifest.xml'))\</WindowsSdkDir>

改为

<WindowsSdkDir Condition="'$(WindowsSdkDir)' == ''">$([MSBUILD]::GetDirectoryNameOfFileAbove('$(MSBUILDTHISFILEDIRECTORY)', 'sdkmanifest.xml'))\</WindowsSdkDir>

增加了Condition="'$(WindowsSdkDir)' == ''"这个配置

image.png

最终运行效果

image.png

image.png

至此,windows桌面开发环境,基本搭建完成

android开发环境

再测试android环境

先查看有哪些可用模拟器

flutter emulators

image.png

运行模拟器

flutter emulators --launch Pixel_3a_API_34_extension_level_7_x86_64

image.png

修改项目的gradle仓库镜像和flutter的gradle仓库仓库镜像

// gradle仓库镜像
mavenLocal()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/central' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
maven { url 'https://www.jitpack.io' }
mavenCentral()
google()
jcenter()

image.png

buildscript {
    ext.kotlin_version = '1.7.10'
    repositories {
        // 网络问题,无法访问这些gradle仓库,需要通过镜像访问
        // google()
        // mavenCentral()

        // gradle仓库镜像
        mavenLocal()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
        maven { url 'https://www.jitpack.io' }
        mavenCentral()
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        // 网络问题,无法访问这些gradle仓库,需要通过镜像访问
        // google()
        // mavenCentral()

        // gradle仓库镜像
        mavenLocal()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
        maven { url 'https://www.jitpack.io' }
        mavenCentral()
        google()
        jcenter()
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

tasks.register("clean", Delete) {
    delete rootProject.buildDir
}

flutter SDK目录\packages\flutter_tools\gradle\resolve_dependencies.gradle

如: D:\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle

image.png

// This script is used to warm the Gradle cache by downloading the Flutter dependencies
// used during the build. This script is invoked when `flutter precache` is run.
//
// Command:
//  gradle -b <flutter-sdk>packages/flutter_tools/gradle/resolve_dependencies.gradle
//      resolveDependencies
//
// This way, Gradle can run with the `--offline` flag later on to eliminate any
// network request during the build process.
//
// This includes:
//   1. The embedding
//   2. libflutter.so

import java.nio.file.Paths

// 因为我已经设置环境变量  FLUTTER_STORAGE_BASE_URL 值为: https://storage.flutter-io.cn, 因此 storageUrl 的值是我环境变量中的值
String storageUrl = System.getenv('FLUTTER_STORAGE_BASE_URL') ?: "https://storage.googleapis.com"

repositories {
    // 网络问题,无法访问这些gradle仓库,需要通过镜像访问
    // google()
    // mavenCentral()

    // gradle仓库镜像
    mavenLocal()
    maven { url 'https://maven.aliyun.com/repository/google' }
    maven { url 'https://maven.aliyun.com/repository/central' }
    maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
    maven { url 'https://maven.aliyun.com/repository/jcenter' }
    maven { url 'https://maven.aliyun.com/repository/public' }
    maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
    maven { url 'https://www.jitpack.io' }
    mavenCentral()
    google()
    jcenter()
    maven {
        url "$storageUrl/download.flutter.io"
    }
}

File flutterRoot = projectDir.parentFile.parentFile.parentFile

assert flutterRoot.isDirectory()
String engineVersion = Paths.get(flutterRoot.absolutePath, "bin", "internal", "engine.version")
        .toFile().text.trim()

configurations {
    flutterRelease.extendsFrom releaseImplementation
    flutterDebug.extendsFrom debugImplementation
    flutterProfile.extendsFrom debugImplementation
}

dependencies {
    flutterRelease "io.flutter:flutter_embedding_release:1.0.0-$engineVersion"
    flutterRelease "io.flutter:armeabi_v7a_release:1.0.0-$engineVersion"
    flutterRelease "io.flutter:arm64_v8a_release:1.0.0-$engineVersion"

    flutterProfile "io.flutter:flutter_embedding_profile:1.0.0-$engineVersion"
    flutterProfile "io.flutter:armeabi_v7a_profile:1.0.0-$engineVersion"
    flutterProfile "io.flutter:arm64_v8a_profile:1.0.0-$engineVersion"

    flutterDebug "io.flutter:flutter_embedding_debug:1.0.0-$engineVersion"
    flutterDebug "io.flutter:armeabi_v7a_debug:1.0.0-$engineVersion"
    flutterDebug "io.flutter:arm64_v8a_debug:1.0.0-$engineVersion"
    flutterDebug "io.flutter:x86_debug:1.0.0-$engineVersion"
    flutterDebug "io.flutter:x86_64_debug:1.0.0-$engineVersion"
}

task resolveDependencies {
    configurations.each { configuration ->
        if (configuration.name.startsWith("flutter")) {
            configuration.resolve()
        }
    }
}

修改项目下的gradle-wrapper.properties文件

image.png

distributionUrl改为本地zip包, 尽量避免从网络下载资源

如:file:///D:/soft-bak/dev/gradle/gradle-7.5-all.zip

运行项目

flutter run

image.png

image.png

如果还是卡在 Running Gradle task 'assembleDebug'...

flutter run 卡在 Running Gradle task 'assembleDebug'... 但具体卡在哪里? - 掘金 (juejin.cn)

真机无线调试app

同一局域网内,flutter无线调试android - 掘金 (juejin.cn)

打包成app

Flutter构建跨平台桌面应用安装包:MacOS、Windows和Linux打包完全指南 - 掘金 (juejin.cn)

总结

最大的问题,还是网络问题,如果有魔法的话,这些配置的修改就都不需要了

参考资料

在 Windows 操作系统上安装和配置 Flutter 开发环境 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

Flutter 安装踩坑记录 HTTP host https://pub.dev/ is not reachable.-CSDN博客

高效解决Connect to maven.google.com:443 [maven.google.com] failed: Connection timed out: connect-CSDN博客

Dart 基础 | Dart

VS2022解决找不到 Windows SDK问题(编译提示一堆无命令提示符错误)-CSDN博客

找不到Windows SDK版本 10.0.18362.0.请安装所需版本的 Windows SDK,或者在项目属性页中或通过右键单击解决_十月旧城的博客-CSDN博客

Flutter编译卡在Running Gradle task ‘assembleDebug‘_running gradle task assembledebug_小哥丷的博客-CSDN博客

【游戏开发进阶】教你自制离线Maven仓库,实现Unity离线环境使用Gradle打包(Unity | Android | 谷歌 | Gradle)_unity 离线打包-CSDN博客