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项目了

相关推荐
bysking18 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓33 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41136 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v38 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解