原创

Flutter初体验

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xiangzhihong.blog.csdn.net/article/details/81019094

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

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

文章最后发布于: 2018-07-12 17:08:26
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览