Flutter环境搭建

本文是学习Flutter的过程记录,分享给爱学习的朋友,环境搭建繁琐又复杂,而且出现问题的概率也比较大,本文不一定涵盖你会遇到的问题,但是会有大部分必要的操作步骤

安装Flutter SDK

下载Flutter SDK

访问官网docs.flutter.dev/get-started...下载SDK,intel和m芯片各自对应下载zip安装包,stable版本就行

选择一个你喜欢的安装目录

bash 复制代码
cd 你的目录
unzip flutter_macos_3.13.5-stable.zip

配置环境变量

dart 复制代码
export PATH="$PATH:Documents/flutterspace/flutter/bin"
export PATH="$PATH:Documents/flutterspace/flutter/bin/cache/dart-sdk/bin"
// 镜像源
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

配置完后保存退出执行

bash 复制代码
source ~/.bash_profile

运行命令,检查是否安装成功

css 复制代码
flutter --version

安装JAVA SDK

访问www.oracle.com/java/techno...,下载mac版本的,下载完后安装器直接安装,点继续就行了

在终端里执行命令,检查是否安装成功

bash 复制代码
/usr/libexec/java_home -V

出现版本信息则安装成功了,把JDK的安装路径复制一下

打开 .bash_profile 文件,没有这个文件就执行touch .bash_profile创建一个

bash 复制代码
vim ~/.bash_profile

按照下面的脚本配置到文件中,路径是刚才复制的路径

bash 复制代码
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

保存关闭文件,执行生效命令

bash 复制代码
source ~/.bash_profile

执行查看java版本命令

java -version

至此ava sdk安装成功

安装Android Studio

安装Android Studio

访问官网developer.android.google.cn/studio?hl=z...,页面往下滑,找Mac版本下载

下载完后点击启动,根据向导一步一步安装即可(Custom安装),选择完Custom安装后,一直下一步就行,直到finish就行了

检查环境

运行flutter命令,检查环境依赖

flutter doctor

如果你没有安装Android Studio,你会发现有很多❌

vbnet 复制代码
 Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

注意看错误提示,Unable to locate Android SDK,说明没有安装Android Studio

如果运行flutter doctor,没有报上面的错误,报了下面这个错

perl 复制代码
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

继续执行下面的命令

css 复制代码
flutter doctor --android-licenses

运行完后大概率报下面的错误

css 复制代码
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.

这个时候打开Android Studio(以下简称AS),找到settings,快捷键command +,,设置SDK

可能AS版本不同,设置SDK位置不同,有的是在Appearance & Behavior下的System Settings下的Android SDK,有的是在Languages & Frameworks下的Android SDK,仔细找找就能找到

右面选择SDK Tools,勾选Android SDk Command-line Tools(latest)

打开terminal,打开.bash_profile文件

bash 复制代码
export ANDROID_HOME=/Users/lijingnan/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

保存关闭文件,执行生效命令

bash 复制代码
source ~/.bash_profile

执行adb命令,就可以使用了

bash 复制代码
adb --help

OK,再回到命令行继续执行

css 复制代码
flutter doctor --android-licenses

这时你会发现命令行提示输入y/N,直接全部输入y就行

接下来可以安装Flutter插件,在Plugins选项中可以看到Flutter插件,点击Install,隐私协议-需要Dart,同意安装就行,然后重启,这时候就可以看到New Flutter Project选项了

创建Flutter项目

创建项目之前先说明,如果能翻墙就翻墙,如果不能翻墙,运行时会报很多问题,基本上配置镜像源就能解决

新建项目,选择Flutter,选择Flutter的SDK安装目录,下一步,项目名,项目存放路径,注意More Settings中Module name不要带有Flutter等字样,会提示冲突,多试几次就好了,点击创建按钮,完成项目创建

打开项目后,直接点击绿色小三角按钮运行项目,这时候会提示没有找到可以连接的模拟器,点击Device Manager按钮,选择模拟器,点击小三角,运行模拟器,第一次时间有点长,耐心等待

运行报错排查

开启模拟器后再运行项目,这时候控制台有可能报红

css 复制代码
You have not agreed to the Xcode license agreements, please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode license agreements.

可能是你安装了Xcode,Xcode更新后需要重新同意证书获取,终端运行

sudo xcodebuild -license

根据提示agree,重启IDEA即可

如果运行Running Gradle task 'assembleDebug'...继续卡住,报错信息如下

Exception in thread "main" java.lang.RuntimeException: Timeout of 120000 reached waiting for exclusive access to file: /Users/用户名/.gradle/wrapper/dists/gradle-7.5-all/6qsw290k5lz422uaf8jf6m7co/gradle-7.5-all.zip

原因是:包下载不下来导致超时,抛出异常

查看项目android/gradle/wrapper/gradle-wrapper.properties文件,看一下需要的gradle版本,浏览器访问地址:https://services.gradle.org/distributions/,下载相应的版本

terminal命令行进入root目录下,打开.gradle文件

arduino 复制代码
open .gradle

打开wrapper/dists/gradle-某个版本-all/一堆数字字母/,将下载的文件包放到这里,放之前把之前的文件删掉

再次运行项目即可

继续运行,这时候可能会在Running Gradle task 'assembleDebug'...卡住,报超时的错误,原因是Gradle的Maven仓库在国外,要么翻墙,不翻墙的话解决这个问题只能配置镜像

1、修改项⽬下的 build.gradle⽂件

⽂件路径:项⽬ --> Android -->build.gradle ⽂件

修改内容:找到buildscript 和allprojects 将⾥⾯的

ruby 复制代码
buildscript {
    ext.kotlin_version = '1.7.10'
    repositories {
// 注释
//        google()
//        mavenCentral()
// 添加
        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:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
​
allprojects {
    repositories {
// 注释
//        google()
//        mavenCentral()
// 添加
        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' }
    }
}

2、修改Flutter安装⽬录中的flutter.gradle⽂件

⽂件路径:flutter/packages/flutter_tools/gradle/flutter.gradle

修改内容(加⼊阿⾥镜像)

rust 复制代码
buildscript {
  repositories {
    // google()
    // mavenCentral()
    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:4.1.0'
  }
}

3、修改flutter sdk安装目录下的文件,flutter/packages/flutter_tools/gradle/src/main/groovy/flutter.groovy

java 复制代码
buildscript {
    repositories {
        // 注释
        // google()
        // mavenCentral()
        // 添加
        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:7.3.0'
    }
}
​
class FlutterPlugin implements Plugin<Project> {
    // 注释
    // private static final String DEFAULT_MAVEN_HOST = "https://storage.googleapis.com";
    // 添加
    private static final String MAVEN_REPO = "https://storage.flutter-io.cn/download.flutter.io";
}

重新运行项目即可

处理完以上这些,mac下就可以运行flutter项目了

相关推荐
GHUIJS3 分钟前
【vue3】vue3.5
前端·javascript·vue.js
&白帝&30 分钟前
uniapp中使用picker-view选择时间
前端·uni-app
谢尔登37 分钟前
Babel
前端·react.js·node.js
ling1s37 分钟前
C#基础(13)结构体
前端·c#
卸任44 分钟前
使用高阶组件封装路由拦截逻辑
前端·react.js
lxcw1 小时前
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED
前端·npm·node.js
秋沐1 小时前
vue中的slot插槽,彻底搞懂及使用
前端·javascript·vue.js
这个需求建议不做1 小时前
vue3打包配置 vite、router、nginx配置
前端·nginx·vue
QGC二次开发1 小时前
Vue3 : Pinia的性质与作用
前端·javascript·vue.js·typescript·前端框架·vue
云草桑1 小时前
逆向工程 反编译 C# net core
前端·c#·反编译·逆向工程