创建第一个flutter应用程序-526互联

在窗口上显示Hello world

初次一个flutter应用程序的时候，flutter社区已经帮你写好了一个现成的“计算器”应用程序。通过计数器应用程序，你可以对flutter的基本功能和性能有一个基本了解。

先删除这些代码，让我们冲头到尾创建一个能够显示“Hello world!”的Flutter应用程序。
删除代码后，Dart analyse发觉了错误。Dart语法检查器找不到MyApp()函数的位置。
这是因为刚才我们把计数器所属的MyApp()代码已经删除了。而我们需要在这里运行的是一个空白的MaterialApp()。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp());
}

当然，如果你发现你的手机模拟器出现了一个错误，请不要担心，稍厚我们加一些组件就好了
Material App:
Material Design
通过这个MaterialApp()，我们开始构建属于我们的小部件树?
在Material App组件树中，最重要属性就是home?(家),这是一切开始的地方。home相当于应用程序的主页。在这个应用程序的主页中，我们想看到的只是一个文本小部件，在文本小部件中显示“Hello world”字符即可。

刷新应用，成功在屏幕上显示了Hello World字样。

但是这个应用还有一个问题，我们的“Hello world”字符并没有居中显示。
因为Flutter是完全由组件构成的，这里我们需要另一个Center()组件来使刚才的我们创建好的字符“Hello world”置于屏幕的中央。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Center(child: Text("Hello world!"))));
}

再次启动应用程序，目前应用程序的显示效果就是我们所期待的那样了。

使用flutter和dart组件进行格式化代码块操作

flutter内部有许多组件相互嵌套，相互嵌套的组件很容易在编程中因为找不着括号而产生不必要的语法错误。因此，我们需要在每个括号后面加上一个“,”英文半角的逗号。

import 'package:flutter/material.dart';

//The main function is the starting point for all our Flutter apps.
void main() {
  runApp(
    const MaterialApp(
      home: Center(
        child: Text("Hello world!"),
      ),
    ),
  );
}

下面一点一点解剖这个程序
:::info
main() 函数是整个应用程序的入口，应用程序的启动通过main函数来启动。
runapp() 函数的作用是用来加载flutter应用程序，并运行其中包含的组件
Material app() 是应用程序主体部分，规定了应用程序应该在主页上显示什么内容。
:::

开工开工！设计“我是富人I am rich”应用程序

创建脚手架

Flutter 组件官方文档
Basic widgets
scaffold.drawio.png
:::info

Scaffold 脚手架

脚手架相当于一个桌子上的桌面，你可以在桌面上放置按钮、标题栏、内容画布等一系列控件。
:::

目前，我们想让应用有一个标题栏，并且附带一个内容区域（身体body）就更好了。接下来我们需要在Scaffold脚手架中加入appbar属性。在对应的appbar属性下加入AppBar()组件。
AppBar() 组件的官方文档?
AppBar class - material library - Dart API

import 'package:flutter/material.dart';

//The main function is the starting point for all our Flutter apps.
void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('I am rich'),
        ),
      ),
    ),
  );
}

重启应用，运行效果如下：

⚠️注意：如果您不喜欢在测试的应用程序的标题栏上出现一个“debug”字样的小横幅，你可以通过以下方法解决：
方法一：在MaterialApp()函数中加入debugShowCheckedModeBanner属性，将其设定为false
方法二：通过flutter inspector来关闭测试小横幅