我们已经有了一个不错的，具有导航功能的应用。美中不足的是，每个页面还是空荡荡的，虽然有一些漂亮的颜色。
现在开始，我们就为页面添加一些有用的部件，让页面看起来更有用一些。本文就先增加一个按钮。
启动 Android Studio，打开 hello_world 项目，运行模拟器，这样就可以实时看到编码产生的效果。现在，我们能看到红色的页面。
添加按钮
找到并打开 main.dart 文件，找到下列代码：
Container(color: Colors.green),
将其替换为以下代码：
Container(
child:
MaterialButton(
onPressed: () { },
child: const Text('显示'),
)
),
在这里，我们去掉了容器的背景色。为容器添加了一个子元素，按钮 MaterialButton。同时，我们对按钮进行了两个配置：
onPressed: 按钮点击处理代码，目前为空。child: 添加一个文本控件子元素，设置按钮上的文字。
现在来看一下效果。点击部件导航图标，我们会发现，页面上多了一个不像按钮的按钮，更像一个普通文本的展示。
如果你没看到页面的变化，请点击 Android Studio 控制台上的热重启按钮：
美化按钮
接下来，我们对按钮做一个美化，让他看起来更像按钮。
在 main.dart 文件中，找到刚刚添加的下面一行代码：
onPressed: () { },
在这一行代码的上面，添加下列代码：
textColor: Colors.white,
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius:BorderRadius.circular(30.0)
),
在这里，我们设置了按钮上文字的颜色为白色，背景色为绿色，并把按钮的边框配置为圆角矩形。
保存文件，点击 Android Studio 控制台上的热重启按钮，我们可以看到，页面上的按钮已经漂亮了很多。
点击事件
如果我们现在点击显示按钮，应用不会有任何反应。这是因为，我们还没有编写任何处理代码。现在我们希望用户点击按钮时，可以在控制台输出一条信息，知道按钮被点击了。
在 main.dart 文件中，找到下面一行代码：
onPressed: () { },
将其替换为下列代码：
onPressed: () { print('按钮被点击'); },
保存文件，点击 Android Studio 控制台上的热重启按钮，再点击页面上的显示按钮。查看控制台，会发现以下输出：
I/flutter (19721): 按钮被点击
提交代码
我们已经完成了在页面上添加按钮，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。
git add .
git commit -m '添加一个按钮。'
