Flutter入门之——HelloWorld

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

项目结构如图：

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。

运行界面

运行应用程序，你应该看到如下界面：