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

如何安装

  1. Windows用户安装说明
  2. Mac 用户安装说明
  3. Linux用户安装说明

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的目录结构如下:

frc 38df5be5f28dc1a512bd008b1cab27fb - Flutter教程 (二)Flutter安装及运行
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的路径,如下图所示:

frc 051590a19143801c583e0c1a8b67216b - Flutter教程 (二)Flutter安装及运行
Android Studio Flutter SDK配置

hello_world的Android工程结构如下图:

frc 21d40766e145bb53347d88b94a2092a9 - Flutter教程 (二)Flutter安装及运行
Flutter_Hello_World_Structure

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

frc e3e007be517d8cec32b677bcabd83334 - Flutter教程 (二)Flutter安装及运行
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和签名

frc 2c452e5c6fc84d72b618a1cf6a62d3ef - Flutter教程 (二)Flutter安装及运行
Flutter_Hello_World_IOS

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

捂脸,作为一个纯正的Android用户,在家没有IOS设备就不上效果图了。。。

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