Flutter教程 (二)Flutter安装及运行

Flutter官网点击访问
 Flutter教程(一)Flutter概览
 Flutter教程(二)Flutter安装及运行
 Flutter如何引用第三方库并使用

如何安装

Mac上安装Flutter过程详解

前方预警，前方预警，前方预警

作为高墙之内的开发者，我们有必要看一看这篇文章Using Flutter in China
。

根据文章的提醒。。。，我们只用在命令行执行以下Shell命令

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

flutter doctor 会比较耗时，耐心等待

如果需要flutter全局有效，需要配置~/.bash_profile文件，添加如下代码：

export PATH=/Users/demon.li/flutter/bin:$PATH"

运行官方示例 hello_world

flutter下的examples目录中有若干个开发示例，对于新手来说十分实用。hello_world项目便位于其中。
hello_world的目录结构如下:

Flutter_Hello_World_Project

进入hello_world目录中，执行
flutter package get安装相关package。

在Android真机上运行hello_world

用数据线连接Android手机并确认手机已开启了调试功能。

命令行

在命令行中，进入hello_world目录。执行以下命令即可：

flutter run

Android Studio编辑器

确保Android Studio已经安装了Flutter和Dart插件，并且配置了Flutter的路径,如下图所示:

Android Studio Flutter SDK配置

hello_world的Android工程结构如下图：

Flutter_Hello_World_Structure

点击Run按钮即可在Android真机上看到效果,漆黑一片只见你好，世界！！！

Flutter_Hello_World_Android.png

在IOS真机上运行hello_world

在IOS真机上运行项目需要安装一些必要的软件，在命令行中别分执行如下命令：

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

安装完毕之后打开hello_world/ios目录下的Runner.xcworkspace（默认大侠你已经安装好了Xcode IDE）

在运行之前需要配置bundle identifier和签名

Flutter_Hello_World_IOS

连接IOS真机，点击Run按钮即可。