mac系统 flutter从安装到第一个应用

时间:2023-03-10 03:35:57
mac系统 flutter从安装到第一个应用

mac系统 安装flutter 分三步:

  1. 安装flutter sdk

  2. flutter环境变量配置

  3. 建立flutter应用

Flutter SDK下载

打开终端执行命令 git clone -b beta https://github.com/flutter/flutter.git 下载flutter SDK

mac系统 flutter从安装到第一个应用

mac系统,Futter SDK下载完成后默认路径是:Users/xxxxx/flutter,比如我的是 Users/wujian/flutter,这个也是flutter SDK的安装目录。

在Mac上显示的就是Macintosh HD ->Users -> wujian -> flutter

Flutter 环境变量配置

使用镜像:

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中。

在命令行下,进入用户目录:执行命令 cd $HOME

打开.bash_profile文件:执行命令 open -e .bash_profile

文件打开后,开始编辑bash文件,在其中添加以下内容:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

同时添加flutter相关工具到path中,也就是添加 Flutter SDK 安装的路径

export PATH=${PATH}:/Users/wujian/Flutter/flutter/bin:$PATH

关闭bash文件,配置完成后,更新配置的环境变量,执行命令: source .bash_profile

flutter验证:

终端直接输入 flutter,没有提示该命令找不到,则配置成功。如下:

mac系统 flutter从安装到第一个应用

运行 flutter doctor,安装相关依赖,可重复执行 ,终端执行命令:flutter doctor

注意,个人经验,可能会卡在“Building flutter tool...”提示语句,请耐心等待。请一定要配置临时镜像,否则会下不下来,经常出现下载失败的情况,请挂VPN尝试,如果未购买vpn,可以使用蓝灯 *免费版使用。

执行结束后,成功后是这样的

mac系统 flutter从安装到第一个应用

第一个Flutter应用

启动Android Studio,安装AndroidStudio的Flutter插件,安装成功后,重启Studio

mac系统 flutter从安装到第一个应用

使用AndroidStudio建立Flutter项目

mac系统 flutter从安装到第一个应用

注意:新建工程,工程名不能含大写字母,这与Android Stuidio不同。New Flutter Project这个过程可能会卡一会,New Flutter Project成功后页面如下:

mac系统 flutter从安装到第一个应用

mac系统 flutter从安装到第一个应用

在Flutter SDK path中选择你的SDK安装路径(指向到顶层flutter目录即可,也就是上面说的 flutter安装目录),不要点击那个install SDK按钮。

Creating Flutter Project的过程十分的漫长,请耐心等待。如果超过5分钟,根据个人经验,可能页面卡死,其实flutter项目已经创建好了,可以到项目路径下查看。

所以,我们直接强杀AS,然后重新打开,open项目

mac系统 flutter从安装到第一个应用

项目打开后,直接运行项目,可能会遇到如下错误

mac系统 flutter从安装到第一个应用

问题描述:由于国内镜像原因,很多jcenter google库无法访问导致,即使vpn开了也一样。

解决方法:修改build.gradle,注释掉jcenter(),google()。使用阿里的镜像。

第一步:

buildscript {
repositories {
//google()
//jcenter()
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:3.1.2'
}
}
allprojects {
repositories {
//google()
//jcenter()
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安装目录,比如:

Macintosh HD⁩ ▸ ⁨Users ▸ ⁨wujian.⁩ ▸ ⁨flutter⁩ ▸ ⁨packages⁩ ▸ ⁨flutter_tools⁩ ▸ ⁨gradle⁩

找到下 flutter.gradle文件 找如如下内容替换成和我一样的 把jcenter注释掉。

buildscript {
repositories {
//jcenter()
//maven {
// url 'https://dl.google.com/dl/android/maven2'
//}
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:3.1.2'
}
}

再重新运行,问题解决。

来源:https://zhuanlan.zhihu.com/p/48866181