Flutter入门之——HelloWorld
程序员文章站
2022-05-29 20:01:59
...
Flutter入门之——HelloWorld
安装Flutter开发环境
首先要准备好Flutter的开发环境和开发所使用的IDE,这里我们使用AndroidStudio作为开发工具。
Flutter的开发环境准备工作参见:
创建Flutter应用
Android Studio为Flutter提供完整的IDE体验。
- 选择 File>New Flutter Project
- 选择 Flutter application 作为 project 类型, 然后点击 Next
- 输入项目名称 (如:helloworld,注意这里要求字母小写), 然后点击 Next
- 点击 Finish
等待项目完成构建即可。
到了这里,我们已经创建一个Flutter项目,项目名为helloworld,其中包含一个使用Material 组件的简单演示应用程序。
查看项目
在项目目录中,应用程序的代码位于 lib/main.dart
项目结构如图:
- 代码目录
- main.dart是程序入口
- 点击绿色三角形即可启动应用了
- 热重载,无需重启程序,即可快速呈现修改。
运行应用程序
我们点击绿色三角形按钮(Run)即可运行项目。
Flutter 可以通过热重载(hot reload)实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。
注:当我们修改了显示内容,Ctrl + s保存,即可触发hot reload,这简直太赞了!
默认创建的项目当然不能满足我们的需求了,我们现在想在屏幕上显示“Hello World”文本,需要怎么做呢?
第一个Flutter程序——Hello World
代码
将main.dart里面的代码替换为如下代码:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
代码分析
本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。
- 应用程序的入口函数为:main(),main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。
- 我们的应用程序类为MyApp,它继承自StatelessWidget(StatelessWidget继承自Widget),在flutter中,万物皆为widget,包括对齐(alignment)、填充(padding)和布局(layout)。
- Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。
- widget提供了一个build()方法来描述如何根据其他较低级别的widget来显示自己。
- 示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。
运行界面
运行应用程序,你应该看到如下界面: