阅读 604
Flutter环境搭建ForMac

Flutter环境搭建ForMac

前言

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

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

电脑环境:iMac(24-inch,M1,2021)

电脑系统:Mac OS 11.3

FlutterSDK2.5.1-stable

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

一: 安装Flutter

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

1.1 下载FlutterSDK

1.1.1 Get started

进入Flutter官网,选择Get started

image.png

1.1.2 选择对应系统

image.png

1.1.3 下载SDK

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

image.png

1.1.4 解压、配置SDK

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

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

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

image.png

1.2 配置环境变量

1.2.1 配置镜像

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

image.png

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

image.png

.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
复制代码

image.png

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

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

# bash 重新载入配置
source ~/.bashrc
source ~/.bash_profile
复制代码

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

flutter doctor
复制代码

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

image.png

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

二: 配置安卓环境

2.1 安装Android Studio

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

image.png

image.png

intel芯片选择Mac with Intel chipApple 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,安装过程无需翻墙。

1633678314151.jpg

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

image.png

2.3 安装Android Studio插件

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

image.png

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

image.png

  • 安装完成后,重启Android Studio

image.png

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

image.png

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,会发现许可证问题!

image.png

  • 终端输入如下命令,然后全部y即可。
flutter doctor --android-licenses
复制代码

image.png

2.6 配置安卓模拟器

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

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

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

image.png

  • 安装模拟器。

image.png

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

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

2.7 解决Gradle卡住问题

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

image.png

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

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

  • 文件路径:项目 --> Android --> build.gradle文件
  • 修改内容:找到buildscriptallprojects将里面的:
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'}
复制代码

如下图:

image.png

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

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

image.png

  • 修改内容(加入阿里镜像):

image.png

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

image.png

总结

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

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

文章分类
iOS
文章标签