【Flutter】Flutter安装和配置超详细（mac）

It一zhai男

已于 2022-07-14 18:58:22 修改

阅读量1.1w

点赞数 6

文章标签： flutter android

于 2022-06-21 10:57:45 首次发布

本文链接：https://blog.csdn.net/u013293125/article/details/125386497

版权

本文详细指导了如何下载和配置Flutter，解决常见问题如Android SDK缺失和CocoaPods未安装，以及如何在原生项目中集成Flutter。重点介绍了非aar与aar方式的集成步骤，适合开发者进行实践操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载Flutter

打开网页https://flutter.dev/，首页->Get started->macOs，下载flutter镜像文件。下载完成后解压，我的解压目录是/Users/yds/Library/Android/flutter
在app store下载xcode，下载安装完成后，打开xcode，同意其协议。

2. 配置环境

可以去flutter中文网查看配置方法。

在控制台输入vm .bahs_profile编辑文件，按i进入编辑模式，将下面内容配置到.bash_profile文件中
export ANDROID_HOME=“/Users/用户名/Documents/android_sdk” //android sdk目录，替换为你自己的即可

export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=/Users/yds/Library/Android/flutter/bin:$PATH

输入完成后，按ESC键，然后在控制台输入:wq 退出并保存编辑，并刷新配置

source .bash_profile

在控制台输入

flutter doctor

在这里插入图片描述

红叉叉表示需要配置到东西

cmdline-tools component is missing
打开android studio，preference->android sdk

勾选上图所示选项，并应用。下载完成后，再次在控制台输入flutter doctor
Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
这个就比较简单了，直接在控制台输入以下内容，然后一路选y就行了

flutter doctor --android-licenses

CocoaPods not installed.
在控制台输入以下内容，然后输入锁屏密码

sudo gem install cocoapods

在这里插入图片描述

HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host: Operation timed out

打开如下目录文件

/Users/yds/Library/Android/flutter/packages/flutter_tools/gradle/flutter.gradle

里面内容如下：
在这里插入图片描述

修改repositories里面的内容为：

maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/central' }

在这里插入图片描述

配置完成后，再次运行flutter doctor
在这里插入图片描述

打开Android Studio，下载flutter插件

安装完成后重启使之生效。
在这里插入图片描述
可以看到，flutter安装时会顺便安装dart

3. Flutter和原生混合开发

3.1 集成flutter

在已经有原生工程的情况下，我们需要在同级目录创建 Flutter 模块，构建 iOS 和 Android 各自的Flutter依赖库。我们只需要在原生项目的同级目录下，执行 Flutter 命令创建名为 flutter_library 的模块即可.

打开原生项目所在目录，新建termimal窗口
输入命令

flutter create -t module flutter_module

在这里插入图片描述
创建完成后，在android studio下会出现以下目录结构

3.2 Android原生集成（非aar方式）

在android根目录setting.gradle里配置

setBinding(new Binding([gradle:this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

在这里插入图片描述
在app模块下的build.gradle里面添加flutter依赖
如果Binding飘红，则先删除上述代码，sync一下后再加入代码。

3.3 Android原生集成（aar方式）

新建Flutter项目

创建完成后目录结构如下所示
调试写好的dart文件
在项目级目录上点击右键->Flutter->Open Android module in Android Studio

打开后Android模块的目录结构如下所示：

直接点击run，它就会加载flutter项目下lib包里的入口页。就可以直接进行调试了。
打包aar
打开Flutter项目，然后选择Build->Flutter->Build AAR
引入Android项目中
打开你的安卓工程，将aar copy到libs目录下