欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter入门之——HelloWorld

程序员文章站 2022-05-29 20:01:59
...

Flutter入门之——HelloWorld


安装Flutter开发环境

首先要准备好Flutter的开发环境和开发所使用的IDE,这里我们使用AndroidStudio作为开发工具。

Flutter的开发环境准备工作参见:

Flutter安装及开发环境配置(Windows)

Flutter安装及开发环境配置(Mac版)

创建Flutter应用

Android Studio为Flutter提供完整的IDE体验。

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如:helloworld,注意这里要求字母小写), 然后点击 Next
  4. 点击 Finish

等待项目完成构建即可。

到了这里,我们已经创建一个Flutter项目,项目名为helloworld,其中包含一个使用Material 组件的简单演示应用程序。

查看项目

在项目目录中,应用程序的代码位于 lib/main.dart

项目结构如图:
Flutter入门之——HelloWorld

  1. 代码目录
  2. main.dart是程序入口
  3. 点击绿色三角形即可启动应用了
  4. 热重载,无需重启程序,即可快速呈现修改。

运行应用程序

我们点击绿色三角形按钮(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。

  1. 应用程序的入口函数为:main(),main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。
  2. 我们的应用程序类为MyApp,它继承自StatelessWidget(StatelessWidget继承自Widget),在flutter中,万物皆为widget,包括对齐(alignment)、填充(padding)和布局(layout)。
  3. Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。
  4. widget提供了一个build()方法来描述如何根据其他较低级别的widget来显示自己。
  5. 示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。

运行界面

运行应用程序,你应该看到如下界面:

Flutter入门之——HelloWorld