Flutter从入门到实战(一)之环境搭建(Mac版)

Flutter官网镇楼

Flutter官网

Flutter SDK 下载

一、在Flutter官网下载安装包,转到下载页
二、也可以去Flutter github项目下去下载安装包,转到下载页
三、在GitHub下载源码,可以直接download zip包,也可以使用git命令行克隆,命令行如下:

git clone -b beta https://github.com/flutter/flutter.git

注意:前两种下载后,自行解压;第三种的下载地址默认路径为:/Users/用户名/flutter

镜像使用

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中(注: 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态):
具体操作:
1.打开终端,直接输入命令vim ~/.bash_profile;
2. 在终端插入环境变量,(直接敲键盘==“i”==,进入INSERT模式);
粘贴以下代码,将镜像加入到环境变量中。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=下载的flutter文件夹路径/bin:$PATH

注意:找不到flutter文件夹路径 ,可以直接找到文件夹,打开终端,敲 “cd+空格 ,文件夹拖入终端,所显示的路径就是”

3.输入后按“esc”退出键盘输入,再敲:wq ,写入并退出。

4.执行以下代码source ~/.bash_profile(没有bash_profile的需要执行此步)
5.终端检测是flutter环境是否配置成功

flutter -h

如果成功,应该会有如下显示:

终端图片

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装:

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)

第一次运行一个flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

我的运行结果是:
终端截图

此时,要将所有的❌都变成✅,根据提示,直接逐行粘贴命令行在终端运行就OK啦。

iOS环境配置

如果出现如下错误提示,则是没有安装iOS环境
终端截图

解决方法:下载并安装XCode,逐条执行终端中加粗的命令行就行。

Android环境配置

如果出现如下错误提示,则是没有安装Android环境
终端截图
解决方法:下载并安装Android Studio,逐条执行终端中加粗的命令行就行。

下载flutter插件

1.打开Android Studio , 快捷键“command+ ,”打开设置
2.在设置的 Plugins–>Browse REspositories 下直接搜索 flutter
屏幕截图
我已经安装过,如果未安装过,会有install 提示,点击安装即可
如果出现网络超时,插件一直下不下来的情况(我出现了这种请况)
截图

请在Android Studio设置中,将Use secure connection前面的勾去掉,因为https协议会出现下不下来的情况:(如下图)j截图

创建flutter 项目

在Android Studio中依次选择File->New->New Flutter Project:
项目创建

新建项目

1.所有路径要用英文小写字母创建。
2.在Flutter SDK path中选择你的SDK安装路径(指向到顶层flutter目录即可,不需要到bin目录)
3.最好勾选 'Create project offline'”这样项目在线下,运行快。

创建项目时,卡在 Creating Flutter Project

像我们平常新建Android Studio项目一样即可。
Creating Flutter Project的过程十分十分十分的漫长,请耐心等待。
卡在'Creating Flutter Project'!!!
如果你等了N分钟还是卡在Creating Flutter Project,接下来献上独家解决秘籍:
其实Android Studio只是假死,项目已经创建好了。我们可以打开项目目录,直接运行,你会发现,大功告成。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lester_ge

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值