Flutter环境搭建

超级无敌大暖南2024-01-11 16:21

本文是学习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项目了

相关推荐
百万蹄蹄向前冲40 分钟前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡2 小时前
lodash常用函数
前端·javascript
emoji1111112 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼2 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习（三）
前端
AiFlutter2 小时前
Flutter-底部分享弹窗（showModalBottomSheet）
java·前端·flutter
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库