Flutter 环境搭建

本文基于 Mac 电脑!

1. 克隆项目

终端命令: git clone -b dev https://github.com/flutter/flutter.git

2.设置环境变量

由于众所周知的原因, 国内无法直接访问 Flutter 网络资源, 需要添加 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL

两个镜像地址;

打开.bash_profile（一般在Mac的当前用户目录下）

终端命令: open ~/.bash_profile

在 .bash_profile 中添加如下三个环境变量:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/admin/flutter/bin:$PATH -----------//Users/admin/flutter改为自己的 flutter 目录

保存.bash_profile

终端命令: source ~/.bash_profile

可以通过运行flutter/bin命令验证目录是否在已经在PATH中:

终端命令: echo $PATH

3.安装到iOS设备

     (1). 安装 homebrew （如果已经安装了brew,跳过此步骤）.

     (2). 打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

4.安装 VS Code

https://code.visualstudio.com

5.安装dart code

dart code

6. 运行flutter doctor，验证是否有错误

cenghaihandeMacBook-Pro:~ catchzeng$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 25.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.21.1)
[✓] Connected devices (1 available)

• No issues found!

二、新建项目

1.调出命令行面板（快捷键Command+Shift+P），输入flutter选择Flutter: New Project，回车，输入项目名并选择保存路径

命令行面板

新建项目

demo

2.确认设备连接

设备连接

3.打开项目目录下的ios/Runner.xcworkspace，并修改签名信息

签名信息

4.按下F5开始Debug调试

Debug

Demo

5.随意修改main.dart，然后Command+s保存，便能看到效果，这就是Flutter的热加载，方便调试

mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times 测试:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],

Demo