Windows 搭建Flutter开发环境教程

Flutter 之 Windows 环境搭建教程(全网最全,亲测有效 2024 年 1月 24 日更新)

Flutter SDK 安装

下载地址:

  • 国内加速访问:https://flutter.cn/docs/development/tools/sdk/releases

  • 官网镜像:https://flutter.dev/docs/development/tools/sdk/releases

Windows 搭建Flutter开发环境教程

解压:

将安装包 zip 解压到你想安装 Flutter SDK 的路径,最好不要放到 C 盘,如果不知道放在那个目录,可以跟着本教程放在 D:\java\flutter 目录下:

Windows 搭建Flutter开发环境教程

全局环境变量配置:

找到 此电脑 => 右键 选择 属性 => 点击 高级系统设置 => 会弹出系统属性的窗口,点击 环境变量 按钮 => 找到 path 变量,再双击,之后会弹框出来 => 点击 新建, 然后分别输入flutter解压安装的bin目录和dart-sdk的缓存目录,如不会找,则跟着本教程配置为:

D:\java\flutter\bin 和 D:\java\flutter\bin\cache\dart-sdk

Windows 搭建Flutter开发环境教程

加速镜像地址配置

flutter的包管理,类似于前端的npm,java的maven, 项目中加载包或打包到真机上运行的的时候,需要下载对应的包,由于国内加载国外的镜像很慢,所以需要在 全局环境变量额外中添加配置 加速镜像地址, 如下所示:

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 配置 PUB_HOSTED_URL 加速地址

Windows 搭建Flutter开发环境教程

  • 配置 FLUTTER_STORAGE_BASE_UR 加速地址

Windows 搭建Flutter开发环境教程

配置gradle加速镜像(2024-1-24 更新 )

flutter项目中,项目的依赖大概分成三种:

场景一: flutter sdk自带依赖

场景二: flutter 第三方插件(不带原生交互),如:dio  get 等插件

场景三: flutter 第三方插件(带原生交互) ,如 fluttertoast、connectivity_plus等插件

针对【场景一】和【场景二】这两种只需要配置如下,就可以加速下载依赖

先配置pub相关的环境变量,上面我们配置过了

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

再修改项目中的android/build.gradle仓库地址,将如下配置

buildscript {
    ext.kotlin_version = '1.7.10'
    repositories {
        google()
        jcenter()
}
    dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

 替换成

buildscript {
    ext.kotlin_version = '1.7.10'
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public/' }
        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' }
        google()
        jcenter()
}
    dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public/' }
        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' }
        google()
        jcenter()
    }
}

这样就能解决场景一和场景二

针对于【场景三】

这种原因大多是因为依赖下载不成功的原因,我们根据上门步骤配置了【场景一】 + 【场景二】的国内加速下载,为什么还是下载不成功了?是因为【场景三】中带有”原生交互”,所以插件必然也依赖了gradle,且插件中基本是没有配置 gradle 加速的。因此

 需要配置gradle全局代理国内镜像

进入到 C:\Users\admin\.gradle 目录下(我电脑当前登录用户名字就叫 “admin”, 其他人需要进入到自己电脑登录的对应用户目录下,如果没有.gradle目录,需要新建),之后再新建init.gradle 文件,文件内容为:

allprojects {
    repositories {
        maven {
            url 'https://maven.aliyun.com/repository/public/'
        }
        maven {
            url 'https://maven.aliyun.com/repository/google/'
        }
 
        all { ArtifactRepository repo ->
            if (repo instanceof MavenArtifactRepository) {
                def url = repo.url.toString()
 
                if (url.startsWith('https://repo.maven.apache.org/maven2/') || url.startsWith('https://repo.maven.org/maven2') 
                    || url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('https://jcenter.bintray.com/')
                    || url.startsWith('https://maven.google.com/') || url.startsWith('https://dl.google.com/dl/android/maven2/')) {
                    //project.logger.lifecycle "Repository ${repo.url} replaced by $REPOSITORY_URL."
                    remove repo
                }
            }
        }
    }
 
    buildscript {
        repositories {
            maven{ url 'https://maven.aliyun.com/repository/public/'}
            maven{ url 'https://maven.aliyun.com/repository/google/'}
 
            all { ArtifactRepository repo ->
                if (repo instanceof MavenArtifactRepository) {
                    def url = repo.url.toString()
                    if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('https://jcenter.bintray.com/')
                         || url.startsWith('https://dl.google.com/dl/android/maven2/')) {
                        //project.logger.lifecycle "Repository ${repo.url} replaced by $REPOSITORY_URL."
                        remove repo
                    }
                }
            }
        }
    }
 
}

使用技巧:非常重要,非常重要,非常重要

1. 确保配置好了 C:\Users\admin\.gradle\init.gradle 

2. 新建项目或者新拉取的项目,可以先把项目中所依赖的包下载到本地缓存中,本地缓存的目录默认是:C:\Users\admin\.gradle\caches,真机打包运行的时候直接从本地缓存中加载即可,那么怎么预先下载项目依赖呢?

先进入到当前项目的/android 目录下,运行如下两个命令:

 .\gradlew clean  

.\gradlew build  

均运行成功,则表示项目所需要的依赖都下载到本地了,以后再也不需要弄了(当然如果后面加上了新的插件,需要重新运行命令)

注意(非常重要):

  1. 如果运行错误,可以先删除本地缓存 C:\Users\admin\.gradle\caches ,这样可以排除一些原因
  2. 如果删除本地缓存,运行命令有问题,则需要修改缓存 C:\Users\admin\.gradle\caches 中对应插件的 build.gradle 信息,比如有些插件gradle 配置的是8.1.2 版本,很巧的是国内所有加速源都没有这个版本依赖(大家不用亲自去找了,我几乎找遍了所有的国内加速源,都没有这个版本),因此再怎么配置都下载不了的,这种方式则需要修改插件的gradle版本
  3. 下面是常用、且容易出现问题的插件:
    connectivity_plus、permission_handler、fluttertoast、path_provider、fluttertoast、shared_preferences等等
    

检查flutter 环境变量配置成功与否

打开 cmd 命令(window 图标 +R 键,弹出窗口,输入cmd 即可以打开命令窗口) => 输入 flutter –version

Windows 搭建Flutter开发环境教程

到此,Flutter sdk 安装配置成功了

升级常遇到的问题:

Flutter upgrade 升级出现

C:\Users\yzx>flutter upgrade ProcessException: Process exited abnormally: fatal: unable to access ‘
https://github.com/flutter/flutter.git/’: Failed to connect to
github.com port 443 after 21069 ms: Timed out Command: git fetch –tags

这种情况是访问不到github,解决方式,第一种翻墙、第二种就是安装最新的Flutter sdk 环境

安装 Android Studio

Step 1

下载 Android Studio

下载地址:https://developer.android.google.cn/studio

如果无法打开上面链接,找老师要安装包

Step 2

下载完成后,双击安装包。Android Studio Setup 将显示在屏幕上,点击 Next

Windows 搭建Flutter开发环境教程

Step 3

需要安装 Android Studio 和 Android Virtual Device(安卓虚拟设备), 默认设置,不做其他处理,继续点击 Next

Windows 搭建Flutter开发环境教程

Step 4

该步骤需要设置 Android Studio 的安装位置,默认是c盘,我们建议不安装在c 盘,本教程安装到 D:\java\Android\Android Studio 目录下,再点击 Next

Windows 搭建Flutter开发环境教程

Step 5

点击 Install

Windows 搭建Flutter开发环境教程

之后就进入安装页面了,需要等待几分钟,之后进入到安装完成界面,点击 Finish

,并启动 Android Studio!

Step 6

如下所示 安装flutter插件

Windows 搭建Flutter开发环境教程

安装 Android SDK

步骤如下两图所示

Windows 搭建Flutter开发环境教程

Windows 搭建Flutter开发环境教程

检测 flutter 运行环境

安装完Flutter SDK 和 Android studio以后,在命令行中,运行 flutter doctor ,可以检测 flutter 所需的环境条件是否都满足

flutter doctor

Windows 搭建Flutter开发环境教程

Android license status unknown.

这个在命令行中,直接给出了解决方案: 运行 flutter doctor –android-licenses

Windows 搭建Flutter开发环境教程

终于安装完成了!

本文来自网络,不代表协通编程立场,如若转载,请注明出处:https://net2asp.com/a57759bd35.html