Flutter初体验

接上一篇文章:Flutter环境搭建,本文主要讲解如何利用Android Studio和VsCode开发一个简单的Flutter应用,如果要了解在原生APP中接入Flutter,可以参考下面两篇文章:iOS原生项目集成 Flutter和Android原生项目集成Flutter

#创建项目 根据Flutter官方文档的介绍,新建Flutter应用主要有三种手段:Android Studio、VS Code和Terminal + 编辑器方式,下面就从这三种方式来给大家讲解。

Android Studio

新建应用

在Android Studio中,依次选择File->New Flutter Project-> Flutter application,然后填写相关信息点击“Next”,最后点击“Finish”。如下图:

创建的项目的源码位于lib/main.dart下,我们可以修改main.dart的源码内容(如果你对dart语言比较熟悉)。

运行应用程序

运行程序也非常的简单,定位到Android Studio 工具栏,然后点击运行按钮即可。

如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序。

热重载

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态。简单来说,就是当代码被更改后,系统会告知IDE或命令行工具需要重新加载(点击reload按钮),此时你就会在设备或模拟器上看到更改的内容。 具体步骤如下:

  1. 将字符串'You have pushed the button this many times:' 更改为 'You have clicked the button this many times:'。
  2. 不要按“Stop”按钮; 让您的应用继续运行。
  3. 要查看您的更改, 只需调用 Save All (cmd-s / ctrl-s), 或点击 热重载按钮 (带有闪电⚡️图标的按钮)即可。

##VS Code VS Code是一个轻量级编辑器,支持Flutter运行和调试,开发Flutter应用之前,需要先安装Flutter和Dart插件。

新建项目

启动VS Code,依次选择 View>Command Palette…,输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action,输入 Project 名称 (如myapp), 然后按回车键,指定放置项目的位置,然后选择蓝色的确定按钮即可。

运行项目

请确保在VS Code的右下角选择了目标设备,然后按 F5 键或调用Debug>Start Debugging等待应用程序启动。如果一切正常,在应用程序建成功后,您应该在您的设备或模拟器上看到应用程序。

##Terminal + 编辑器

创建项目

除了上面介绍的两种方式,您还可以使用编辑器与Flutter的终端工具结合的方式构建和运行Flutter项目。

1,使用 flutter create 命令创建一个project,命令如下:

flutter create myapp
cd myapp
复制代码

此时,就创建了一个名为myapp的Flutter项目,项目的代码位于 lib/main.dart中。

运行项目

1,检查Android或iOS设备是否处于运行状态,如果没有,请先启动设备。可以使用下面的命令来查看设备的连接情况:

flutter devices
复制代码

2,使用命令“ flutter run”来运行项目。

flutter run
复制代码

如果一切正常,在应用程序建成功后,您应该在您的设备或模拟器上看到应用程序。

你可能感兴趣的:(Flutter初体验)