Flutter初体验(一)——Mac 安装配置

595 阅读2分钟
原文链接: blog.csdn.net

Mac 安装配置 Flutter


参考文档:
flutter.io/setup-macos… blog.csdn.net/zhangxiangl…


1. 获取 Flutter SDK

  • #### clone Flutter
    1、使用git将Flutter项目克隆到本地,然后将Flutter添加到本地环境变量,
git clone -b beta https://github.com/flutter/flutter.git

2、到Flutter保存的路径下

export PATH=`pwd`/flutter/bin:$PATH

2.1、如果下载失败,Google为中国地区提供了镜像

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor

Run flutter doctor

运行Flutter doctor命令检查是否需要安装依赖项,完成安装

flutter doctor

这个命令会检查环境并在窗口显示报告,Dart SDK与Flutter捆绑在一起;没有必要单独安装Dart。仔细检查输出是否需要安装其他软件或执行其他任务

如果不出意外,报告如下:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v0.1.7, on Mac OS X 10.12.6 16G1212, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.0)
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
[✓] Android Studio (version 3.0)
[✓] Connected devices (1 available)

第一次运行命令时,它会下载自身的依赖关系并自行编译,后续运行会快很多。如果过程失败,多重复几次,并根据命令行提示进行安装。

接下来会介绍如何执行这些任务并完成设置过程,如果你选择使用某个IDE,可用于IntelliJ IDEA, Android Studio, 和 VS Code,你会看到flutter doctor输出过程。

一旦你安装了任何缺失的依赖关系,再次运行flutter doctor命令来验证你已经正确设置了所有东西.

2. 获取文件路径

Flutter SDK下载后的路径,获取Flutter SDK 的安装路径:
/Users/用户名/flutter,要注意的是flutter文件夹下面有多个同名的flutter文件夹,真正的SDK路径只到顶层flutter文件夹
具体步骤参考网友做的GIF

打开文件管理
打开文件管理

进入sdk目录

获取文件完整路径

3. 安装Flutter插件和Dart插件

这里以AndroidStudio为例,打开Preferences面板,在Plugins中搜索Flutter,install,安装时自动安装Dart,安装完成后重启AndroidStudio

重启AndroidStudio后,File->New 中出现 New Flutter Project,说明安装成功屏幕快照 2018-03-13 20.38.38.png

4. 创建Flutter Project

  • File -> New -> New Flutter Project,选择Flutter Application -> Next,这里注意 Flutter SDK的路径是否正确

  • Next -> 设置 Company domain,Finish,Project创建完成,等待几分钟,Project完成初始化,新建Project提供了默认界面,直接运行,看看运行界面:
    image.png

至此,Flutter环境配置完成,示例也能运行,后续继续学习Flutter的开发。