Flutter 搭建Mac环境

本篇将介绍如何在Mac上搭建Flutter环境,并安装使用Android Studio来新建一个Flutter项目。Mac上可以安装Android Studio和xcode。但是windows上只能安装Android Studio。

一. 下载Flutter SDK

这是官网下载地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

Flutter SDK解压的位置很重要,因为下一步配置环境镜像时需要用到这个解压地址。

二. 配置环境镜像

执行vim ~/.bash_profile,将以下命令加到文件中

//国内用户需要设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn 
//国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
// PATH_TO_FLUTTER_GIT_DIRECTORY 为Flutter sdk的解压地址
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

保存后执行 source ~/.bash_profile,重新加载。此时环境镜像已经配好了,执行flutter -h 来检查flutter是否安装成功了。若出现下图则表示安装成功。

flutter_1.png

注意: 如果你使用的是zsh,终端启动时, ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile。然后重启窗口就可以了。

三. 安装Android Studio,并安装Flutter插件

在Mac中也可以安装XCode,但在windows中只能安装Android Studio。
先下载并安装Android Studio,下载地址:http://www.android-studio.org/。安装完成后,在/AndroidStudio/Preferences/Plugins中搜索Flutter

flutter_2.png

点击 search in repositories ,然后点击安装。到这里就已经安装完成了,重启下Android Studio就可以了。

四. 运行flutter doctor,检查是否都安装好了

若有没有安装的会有x的提示,按照提示安装即可。由于这里只安装了Android Studio,所以会有xcode的错误提示,暂时可以先忽略xcode的错误提示。
其中有个错误提示是安装安卓证书。安装证书命令如下:

flutter doctor --android-licenses

执行命令后会y/N的询问,一律选择y,就可以安装好。
再执行flutter doctor会发现证书的提示显示成功。

五. 创建flutter项目

此时我们的环境已经搭建完成了,此时我们可以打开Android Studio来新建我们的第一个Flutter项目。

  1. 首先打开Android Studio,选择Start a new Flutter project


    flutter_3.png
  2. 然后选择Flutter Application,然后点击Next


    flutter_4.png
  3. 填写相关配置
  • Project name 是你Flutter项目的名称
  • Flutter SDK path,则是Flutter SDK的地址,就是第2步配置环境变量的那个地址。若这个地址错了,则不能创建项目,这里也可以点击install SDK(我尝试过,非常的慢)
  • Project location 是你Flutter项目需要存放的地址
  • Description 是项目描述
    若有错误,会有提示。没有错误提示的话,则点击Next


    flutter_5.png
  1. company domain是公司域名。然后点击Finish创建,如果是第一次创建,则会有点慢,等待一下就可以了。创建完成后就能看到main.dart文件代码。


    flutter_6.png
  2. 增加设备。点击Tools/AVD manager/,再点击新增按钮,然后就能看到各种手机型号,然后有个默认的选择(如果你有特定机型的需求就按照需求创建即可),然后我们呢直接点击Next


    flutter_7.png

    选择Pie,点击Pie旁边的download(我的已经下载过了,所以没有),下载完成后点击Next


    flutter_8.png

    然后你可以修改名称,点击Finish则配置成功了一个AVD。创建成功后,我们在AVD manager中可以看到我们刚刚配置的信息,然后点击绿色的启动按钮。我们就可以看到一个手机模拟器了。
    flutter_9.png

    我们回到main.dart文件,点击启动按钮(第一个红色框里面),稍等一会就能看到手机模拟器上显示了内容。


    flutter_10.png

    到这里我们的Flutter项目就初步启动起来了。当我们改动了代码之后,只要保存了,就能热重载,模拟器也会刷新。还是很厉害的~
    flutter_11.png

六. 使用VScode运行Flutter项目

VSCode也能支持Flutter项目的编写和运行。首页安装Flutter插件,这个插件会自动我们安装上Dart插件。我们用VSCode打开刚刚用Android Studio创建的flutter_app项目,会发现代码有颜色了,也就是Flutter插件安装成功了。
  点击调试-->启动调试(F5)(调试模式),会出现刚刚我们刚刚创建的AVD信息,也可以选择一个新的emulator(模拟器)。选择之后,就会出现一个手机模拟器,跟刚刚用Android Studio运行时一样的模拟器。修改代码保存后,也会热重载。
  点击调试-->在不调试的情况启动。这个也可以出现模拟器。
选择调试设备:
  1. 点击右下角的No Device。没有选择设备时,显示No Device,若选择了则会显示已选的设备名称
  2. 在命令面板中找到 Flutter: Select Devices
  3. 点击调试-->启动调试或者在不调试的情况启动,也可以选择设备


flutter_12.png

这是VSCode选择设备的显示,可以选择已有的设备,也可以点击Create Android emulator来新建设备。

PS:写的不好请多包含,若有错误请告知修改~

你可能感兴趣的:(Flutter 搭建Mac环境)