运行Flutter示例项目

3,164 阅读3分钟

前言

前文介绍了Flutter开发环境的搭建,本文就来新建个示例demo运行玩玩。

一: 创建Flutter示例项目

1.1 Android Studio创建Flutter项目

  • 打开Android Studio选择New Flutter Project

image.png

  • 选择Flutter之后,输入项目信息,选择finish完成创建。

image.png

1.2 终端创建Flutter项目

  • 打开终端,进入想要创建Flutter项目的目录。

image.png

  • 使用终端创建Flutter项目也可以指定语言、平台、模板等,使用如下指令可以查看终端创建项目的一些选项指令。
flutter create --help

image.png

iOS默认使用Swift语言,android默认使用kotlin语言,创建项目时,我们可以通过-i-a来指定相应的语言。其他一些指令,有兴趣的可以自己研究。

  • 使用如下指令创建iOS语言为OCFlutter项目。
flutter create -i objc flutter_demo

image.png

二: 运行Flutter项目

2.1 终端运行项目

2.1.1 终端运行项目到iOS模拟器

  • 进入Flutter项目目录,打开iOS模拟器,通过如下指令运行项目。
// 进入项目目录
cd flutter_demo
// 打开iOS模拟器
open -a Simulator
// 运行Flutter项目
flutter run

image.png

Flutter run key commands为调试指令:

  • r:热重载。修改代码后重新载入,以显示更改。
  • R:热重启。重新启动项目,使项目回到初始状态。
  • h:列出所有可用的交互式命令。
  • d:分离(终止"flutter run",但让应用程序继续运行)。即模拟器上运行的程序与项目断开调试,单独运行。
  • c:清除屏幕。
  • q:退出(终止设备上的应用程序)。

输入h可以查看所有可用的交互式命令,有兴趣的可以自己研究。

image.png

2.1.2 终端运行项目到iOS真机

  • 总所周知,iOS项目想要在真机上运行是需要签名的,所以先打开项目目录下iOS对应的Runner.xcworkspace修改Bundle Identifier,指定Team

image.png

  • 连接真机,使用Xcode运行项目(每个项目第一次在真机上运行,都需要使用Xcode运行,以进行签名,后续就可以使用Android StudioVS Code或终端进行运行了。之所以不使用Xcode进行开发调试,是因为Xcode不支持Dart语法和热重载热重启,但是Android Studio支持)。

image.png

  • Xcode停止运行,回到终端,执行如下指令运行项目。
flutter run

image.png

  • 有多个设备的情况下,会给我们列出来,这里选择序号为1的真机(运行时真机不要处于锁屏状态,不然会运行失败)。

image.png

2.2 Android Studio运行项目

  • 使用Android Studio打开Flutter项目或直接将项目目录拖入Android Studio,将项目类型改为Project

image.png

  • 真机连接电脑,启动模拟器,刷新之后,选择设备运行项目(想要将项目运行到iOS真机上的话,也需要先使用Xcode进行签名)。

image.png

  • 修改导航栏title,点击热重载功能,会发现很快就将我们所修改的地方进行重载了。

image.png

  • 点击热重启,查看模拟器APP变化,会发现数字重新变为了0

image.png

总结

到这里,关于示例程序运行的介绍就结束了。下篇文章将开始介绍Dart的基础语法。敬请期待。