Flutter 应用提供了大量的 Material 设计风格的界面组件 ... 想要使用这些东西，我们可以去创建一个 MaterialApp ...

先再定义一个小部件 .. 添加一个 class ... 名字是 Hello ... 继承一下 StatelessWidget .. 类里面添加一个 build 方法 ....

然后把这个在屏幕中间显示的 hello ，放到 Hello 这个小部件里面 ...

现在这个 App 小部件，可以返回一个 MaterialApp ... 在里面添加一个 home ... 设置一下默认的首页 .. 暂时把它设置成在下面定义的 Hello 这个小部件 ...

保存一下文件 ... Hot Reload 之后，在屏幕中间仍然会显示一个 Hello ... 不过这个文字的下面多了两条横线 ..

再修改一下 ...

Scaffold

这里用一个 Scaffold 小部件 .. 它也是 Material 里面带的一个小部件 ... 这个东西里面包含了 Material 风格的应用的页面上常用的一些界面组件 .. 比如页面顶部或者底部的工具栏等等 ...

添加一个顶部的工具栏，可以在这个 Scaffold 里面添加一个 appBar 属性 ... 它的值用一下 AppBar ... 工具栏上显示的文字可以用 title 属性设置一下... 文字要放在 Text 小部件里面 ... NINGHAO ...

现在你看到的就是一个默认的 AppBar ...

页面的主体内容是在 Scaffold 部件的 body 属性里面设置的 .. 先给它添加一个 body 属性 ... 对应的值暂时设置成 Hello 这个小部件 ...

可以再修改一下文字的颜色 ... 设置成 black87 ...

这个顶部工具栏下面有个阴影的效果 ... 设置阴影的大小，可以在 AppBar 里面添加一个 elevation ... 默认它的值是 4 ... 你可以根据自己的需要重新设置一下它的值 ... 不想要这个阴影可以把它的值设置成 0.0 ...

ThemeData

我们还可以去设置一下界面的主题颜色 .. 在 MaterialApp 里面 ... 添加一个 theme 属性，设置一下主题 ... 对应的值用一下 ThemeData ...

然后在它里面先设置一下 primarySwatch 的值 ... 把主要的颜色设置成一种黄色 ...

保存 ... 你会发现界面上的这个 AppBar 的颜色的变化 ...