专栏首页前端技匠flutter的mac安装教程

flutter的mac安装教程

“虽然官网上已经有很详细的教程了,但是作为一名没有开发过客户端,刚买mac不到一年的人来说还是有很多不是很明白的地方,本次教程就是准对完全没有经验的小白的安装教程

下载 Flutter SDK

地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

选择 Stable channel (macOS) 稳定渠道的最新版本

flutter sdk

解压 Flutter SDK

将下载好的 SDK 解压到 development 文件夹下

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
# flutter_macos_v0.5.1-beta.zip 是你的下载包,将你下载的名称替换掉

添加 Flutter SDK 到 path

配置path,配置成功后你可以直接在终端使用 flutter 命令了。

export PATH=$BASE_DIR/development/flutter/bin:$PATH
# $BASE_DIR 是你的 home 目录 /Users/yourName/

这里的目录一定要是你的解压的 Flutter SDK 的位置,你可以进入文件夹试一下

cd $BASE_DIR
cd ./development/flutter

如果能找到就没有问题了

cd

你还可以使用 pwd 查看一下当前的目录

pwd

记住这个目录后面会用到

环境变量设置好之后,执行 source 命令,使 path 生效

source ~/.bash_profile

永久保存命令

现在可能只是临时生效,下次关闭了窗口之后 flutter 命令就又会失效,为了永久保存,我们需要将 source 添加到 .zshrc 中

在 vim ~/.zshrc 文件最后,增加一行:

source ~/.bash_profile

这样我们的 flutter sdk 的 path 已经彻底配置好了,不熟悉这套设置的还是挺麻烦的

执行检查

在终端运行检查命令,你会发现你除了 Flutter SDK 以外都是 [X],说明你电脑还没有安装这些功能

检查

安装安卓 sdk

一般安卓 sdk 在 $HOME/Library/Android/sdk 这个目录下,你可以 cd 进去看看有没有这个目录

cd $HOME/Library/Android/sdk

如果存在的话你就可以直接运行 flutter 命令,将安卓sdk path 添加到 flutter

flutter config --android-sdk $HOME/Library/Android/sdk

配置 android-sdk 环境变量

export ANDROID_SDK=$BASE_DIR/android-sdk
export ANDROID_PATH=$ANDROID_SDK/tools:$ANDROID_SDK/platform-tools
export PATH=$BASE_DIR/development/flutter/bin:$PATH
export ANDROID_HOME=${ANDROID_PATH}
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

接下来运行一下 flutter doctor 再试一下

licenses

会发现有黄色警告,没有安装安卓证书。

flutter doctor --android-licenses

ok

这时候已经没有问题了,安卓 sdk 已经安装完毕

安装 andriod studio

接下来我们需要下载一个编译器,我选择的是 andriod studio,官网上有教程 https://flutterchina.club/setup-macos/#%E5%AE%89%E8%A3%85android-studio

安卓 flutter dart 插件

打开 andriod studio 编译器,找到右上角的 【SDK manager】图标,点击它

manager

找到 plugins,搜索 flutter/dart 并安装即可

plugins

下载模拟器

在 devices 按钮下选择你要使用的模拟器

devicese

如果没有的话需要下载模拟器,在右上角选择 AVD manager

avd

点击创建虚拟设备

avd-d

接下来按照步骤下载就可以了

运行

选择模拟器。点击 run 按钮

run

本文分享自微信公众号 - 前端技匠(gh_057b814fc3f7),作者:罗学

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mac版最详细的Flutter开发环境搭建

    cd ~/development unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

    李文杨
  • 零基础三分钟写一个Flutter App

    这个教程是面向完全没有接触过Flutter开发,从0开始搭建Flutter开发环境到写第一个Flutter app的。 正常情况只需要半个小时就可以看到app。

    PhoenixZheng
  • 千秋万代,一统江湖——Flutter for All Screens

    2018年2月27日,Google发布了Flutter的第一个Beta版本,由于自己是一个Google粉,所以很快就下载尝鲜了,之后还在简书上发过一篇博客《你好...

    出其东门
  • Flutter Lesson 1:Flutter之环境搭建

    就在几天前(2019年05月08日),Google发布了新一版本的Flutter,同时伴随着巨大的更新。之前的Flutter顶多就是跨Android与IOS平台...

    踏浪
  • Flutter for Web 开发环境搭建与验证

    最新的Flutter 1.5.4已经支持Web开发,这个教程将介绍如何在Linux、windows和Mac下 安装Flutter web开发环境:安装Flutt...

    用户1408045
  • Flutter之初体验

    Flutter是什么?他是谷歌根据Dark语言开源的跨平台开发依赖。和目前比较火的Reactive Native一样,一套代码能够实现两个不同平台的App。那么...

    蜻蜓队长
  • Flutter 环境准备篇

    Windows 下,设置临时环境变量,不推荐!!!,建议将之配置到系统环境变量中。

    arcticfox
  • 首战 之 Flutter 1.0 久违了(Mac)

    跨平台,比较优秀的有 React Native(Facebook)以及 Weex(阿里巴巴),当然,还有其他例如微软提供以及其他就不一一列举了。

    HLQ_Struggle
  • MAC下安装ELK教程

    美团骑手

扫码关注云+社区

领取腾讯云代金券