likes
comments
collection
share

Flutter环境搭建ForMac

作者站长头像
站长
· 阅读数 71

前言

Flutter是谷歌开发的跨平台移动UI开发框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

从今天开始，就进入Flutter的学习了。本文主要记录Flutter的环境搭建。

电脑环境：iMac（24-inch，M1，2021）

电脑系统：Mac OS 11.3

FlutterSDK：2.5.1-stable

Flutter的配置相比于以前来说简单很多了。本文选择Android Studio作为开发Flutter的工具。后续有机会再更新Visual Studio Code。

一: 安装Flutter

这里的步骤其实和官网差不多，大家也可以直接参考Flutter官网。

1.1 下载Flutter的SDK

1.1.1 Get started

进入Flutter官网，选择Get started。

Flutter环境搭建ForMac

1.1.2 选择对应系统

Flutter环境搭建ForMac

1.1.3 下载SDK

下载最新稳定版本压缩包。

Flutter环境搭建ForMac

1.1.4 解压、配置SDK

下载完成后，就是配置SDK路径了。

因为Flutter的SDK中包含了很多命令行工具，我们需要配置环境变量，所以建议你安装到你平时放命令行工具程序的地方！

本文解压之后，放在🏡目录下~/flutter（仅供参考，安装在哪里看你自己的习惯）。

Flutter环境搭建ForMac

1.2 配置环境变量

1.2.1 配置镜像

Flutter在运行时，需要去官方下载所需要的资源，由于众所周知的原因，如果没有“梯子”的话，就需要镜像服务器，Flutter官方在下载SDK的地方给出了相关的友情提示。

Flutter环境搭建ForMac

来到对应的Shell配置文件进行配置。Mac新系统默认是zsh，就配置~/.zshrc，老系统默认是bash，就配置~/.bash_profile。

Flutter环境搭建ForMac

.zshrc为隐藏文件，同时按住shift + command + .可以显示或隐藏隐藏文件。

# Flutter 镜像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1.2.2 配置Flutter环境变量

接下来，配置Flutter命令行工具的路径。还是对应Shell的配置文件中。

# Flutter 配置
export FLUTTER=~/flutter
export PATH=$FLUTTER/bin:$PATH

Flutter环境搭建ForMac

配置完成后，重新打开终端或输入命令载入配置。

# zsh 重新载入配置
source ~/.zshrc
source ~/.profile

# bash 重新载入配置
source ~/.bashrc
source ~/.bash_profile

接下来使用doctor检测指令检测Flutter环境。

flutter doctor

如果运行结果全部✅就是配置OK了，❎就是还没有配置好的。

Flutter环境搭建ForMac

Flutter环境已经配置好了，接下来就是配置安卓环境了。

二: 配置安卓环境

2.1 安装Android Studio

先去国内Android Studio官网下载最新安装包。

Flutter环境搭建ForMac

Flutter环境搭建ForMac

intel芯片选择Mac with Intel chip，Apple M1芯片选择Mac with Apple chip。

2.2 配置SDK

根据安装向导，我们需要安装Android SDK，Android SDK Tools，Android SDK Command-line Tools，Android SDK Platform-Tools 和 Android SDK Build-Tools，安装过程无需翻墙。

Flutter环境搭建ForMac

也可以同时点按command + ,进入偏好设置，如下图安装。

Flutter环境搭建ForMac

2.3 安装Android Studio插件

  • command + ,打开Android Studio偏好设置，安装Flutter插件（欢迎界面的Plugins模块同样可以安装）。

Flutter环境搭建ForMac

当跳出需要安装Dart插件时，也点击install进行安装。

Flutter环境搭建ForMac

  • 安装完成后，重启Android Studio。

Flutter环境搭建ForMac

  • 可以看到在欢迎界面，已经有了New Flutter Project的选项。

Flutter环境搭建ForMac

2.4 解决JDK的问题

cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
flutter doctor -v

2.5 解决许可证问题

  • 再次运行flutter的检测命令flutter doctor，会发现许可证问题！

Flutter环境搭建ForMac

  • 终端输入如下命令，然后全部y即可。
flutter doctor --android-licenses

Flutter环境搭建ForMac

2.6 配置安卓模拟器

如果你是M1版iMac，那么你就先老老实实使用Android Studio自带的安卓模拟器吧，等后续夜神模拟器适配之后再切换。就像笔者一样。😂

安卓自带模拟器又丑又慢，所以我们选择一款国内的“夜神”模拟器。类似的模拟器有很多，选择它主要是因为它有Mac版本。

  • 进入官网，直接下载最新安装包。

Flutter环境搭建ForMac

  • 安装模拟器。

Flutter环境搭建ForMac

  • 安装完之后启动，在Android Studio就会有显示了。

如果启动过程中遇到了什么问题（比如卡在99%进度），请访问夜神模拟器Mac版本常见问题。

2.7 解决Gradle卡住问题

当Flutter项目首次运行时，你会发现卡住不动了（如果没卡住，那跳过2.7），原因是Gradle的Maven仓库在国外。你懂的（当然，如果你有梯子，那当我没说🤐）。

Flutter环境搭建ForMac

此时我们可以通过配置镜像的方法解决（注意：每个Flutter工程都需要配置）。配置如下：

2.7.1 修改项目下的build.gradle文件

  • 文件路径：项目 --> Android --> build.gradle文件
  • 修改内容：找到buildscript和allprojects将里面的：
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'}

如下图：

Flutter环境搭建ForMac

2.7.2 修改Flutter安装目录中的flutter.gradle文件

  • 文件路径：~/flutter/packages/flutter_tools/gradle/flutter.gradle

Flutter环境搭建ForMac

  • 修改内容（加入阿里镜像）：

Flutter环境搭建ForMac

配置好之后，Flutter项目就可以正常较快的启动了。

Flutter环境搭建ForMac

总结

Flutter的开发环境搭建到这里就完成了，还是比较简单的。

下篇文章将记录示例项目的运行与调试。敬请期待。

转载自:https://juejin.cn/post/7017621020395700232
评论
请登录