2.6　添加Scaffold页面

到目前为止，Flutter的内容已经涵盖了很多方面，但是在模拟器的屏幕上还是什么都看不到，所以我们需要告诉MaterialApp需要做些什么，然后显示到模拟器的屏幕上。我们可以给MaterialApp传递参数。之前在创建build（）方法时需要一个参数，同样MaterialApp的构造器也需要传递参数，它接收命名的参数，这意味需要添加一个名字，例如home。这个参数加上冒号然后加上传递的值，还有一种是位置参数，例如build（context），这里的参数不需要名字，build（）方法中传递的第一个参数会被认为是context。在Flutter中我们会经常用到命名参数。现在我们需要给home这个参数传递一个值，home需要传递的实际上是小部件，它们会被绘制到屏幕上。这里你可以使用Scaffold，它是material包附带的，Scaffold可以在App中创建一个页面，默认是白色的背景，也可以修改这个背景颜色。

Scaffold还可以添加标题栏等小部件。同样需要在构造器中传递数据，其中一个参数叫appBar，输入冒号，添加一个顶部的导航栏AppBar（）小部件，现在同样也需要配置AppBar来显示内容。其中一个参数为title。把鼠标悬停在AppBar上，会看到我们可以传递哪些参数，你会发现title这个参数同样会传递一个小部件。这里我会用到这个小部件链上的最后一个小部件Text，Text是一个需要传递String类型数据的小部件。Text是由位置参数创建的，所以只需要传递一个String类型的数据，并放在参数的第一个位置，代码如下：

这样Text小部件就可以获取到数据了。现在传递一个String类型的数据，它将会被显示出来。

但是在模拟器的屏幕上还是什么都看不到，这是因为虽然我们创建了小部件，但没有挂载到屏幕上。在main（）方法中，没有执行任何内容。main（）方法中需要运行一个特殊的方法，也是material包附带的，这个特殊方法是runApp（）。runApp（）方法需要传递一个参数，这个参数必须是一个小部件。创建小部件Myapp，代码如下：

Myapp中包含了MaterialApp、Scaffold等。可以尝试使用热加载运行模拟器，如果失败了，需要退出，然后单击“Start Without Debugging”来启动。这就是当前我们的App，如图2.12所示。

图2.12　成功启动Flutter应用

可以看到AppBar和Scaffold的白色背景，以及包含这一切的MaterialApp的小部件。