Flutter -- 环境搭建

一、环境搭建

1.克隆项目

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

2.将flutter加入path（让在任何目录下都可调用flutter）

打开.bash_profile（一般在Mac的当前用户目录下），编辑添加

export PATH=[克隆项目的目录]/flutter/bin:$PATH

cenghaihandeMacBook-Pro:~ catchzeng$ vim ~/.bash_profile
[[ -s "$HOME/.profile" ]] && source "$HOME/.profile" # Load the default .profile

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function*


# added by Anaconda2 5.1.0 installer
export PATH="/Users/catchzeng/anaconda2/bin:$PATH"

export PATH=/Users/catchzeng/flutter/bin:$PATH

运行source刷新

source ~/.bash_profile

验证PATH是否包含了flutter

cenghaihandeMacBook-Pro:~ catchzeng$ echo $PATH
/Users/catchzeng/flutter/bin:/Users/catchzeng/anaconda2/bin:

3.安装iOS环境依赖

$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods

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