开源项目 开始创建你的第一个 Flutter 应用

es6china · 2018年06月26日 · 最后由 es6china 回复于 2018年06月26日 · 541 次阅读
本帖已被设为精华帖!

前言

本文只是针对于Mac平台创建你的第一个应用,Windows未做测试。如你是Windows请自行进坑测试。

在今年的2018世界移动大会上,Google发布了flutter的第一个beta版本,Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架。关于此框架的具体细节不做表述,请自行查看官方文档。官网地址:https://flutter.io/

开始

首先需要获取Fluuter SDK,获取sdk有两种方式:

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

然后进行镜像设置,如果你能翻墙,可以跳过这一步:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH

添加到系统路径:

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

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装:

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)

如图所示:

如有任何问题请参照粗体显示的进行解决。

第一次运行一个flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

一旦你安装了任何缺失的依赖,再次运行flutter doctor命令来验证你是否已经正确地设置了。

iOS 设置

安装 Xcode

要为iOS开发Flutter应用程序,您需要Xcode 7.2或更高版本:

安装Xcode 7.2或更新版本(自行解决).

配置Xcode命令行工具以使用新安装的Xcode版本

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。

确保Xcode许可协议是通过打开一次Xcode或通过命令

sudo xcodebuild -license

同意过了.

使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。

设置iOS模拟器

要准备在iOS模拟器上运行并测试您的Flutter应用,请按以下步骤操作:

在Mac上,通过Spotlight或使用以下命令找到模拟器:

open -a Simulator

通过检查模拟器 硬件>设备 菜单中的设置,确保您的模拟器正在使用64位设备(iPhone 5s或更高版本). 根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例

启动你的应用.

flutter run

Vs code 设置

首先安装插件(如图所示)

创建应用 创建的时候可能需要你选择Flutter SDK,选择目录即可

创建完项目之后使用命令行打开项目(Xcode)

open ios/Runner.xcworkspace

至此,你可以使用Xcode运行你的项目了。

Demo

如果你对此文有任何意见或者建议,欢迎在下方评论指出,感谢您的支持!
最后,放上我成功的demo

共收到 2 条回复

666666,又要开始学了

Jim 回复

好好写你的GO,不要来前端这个坑了

es6china 将本帖设为了精华贴 06月27日 13:07
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册