在创建应用导航一文中，我们为应用增加了一个底部导航栏，点击导航图标，也可以正常切换。但是，美中不足的是，不论你点击哪个导航图标，屏幕中间的内容区域都是一片空白。现在我们就来解决这个问题。
启动 Android Studio，打开 hello_world 项目，运行模拟器，这样就可以实时看到编码产生的效果。当然，现在只能看到空白的导航页面。
为什么显示空白
我们先来搞清楚页面一直显示空白的原因。
找到并打开 main.dart 文件，在 _HomePageState 类的 build 方法中，找到下面的代码：
body: SafeArea(
child: Container(),
),
我们先来简单解释一下这段代码。
body: body 属性是用来设置屏幕要显示什么内容。SafeArea: 调用 SafeArea 方法是确保我们的内容显示在“安全区域”，不会被手机操作系统固有的界面内容所影响或遮挡。child: child 属性是实际我们配置要显示的内容的地方。
可以看到，child 属性的值是 Container() 方法返回的一个空容器，里面没有放置任何东西，这也是我们看到空白屏幕的原因。而且，这个属性的值是固定的，不会因为我们点击了导航图标而改变，这也是为什么我们点击导航图标，也一直白屏的原因。
创建导航页面
为了能给切换不同的页面，我们首先需要创建这些页面。
继续在 main.dart 文件中，找到下列这行代码：
int _selectedIndex = 0;
在这行代码的下面，添加以下代码：
// 创建一组彩色的容器
static List<Widget> pages = <Widget>[
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue)
];
这是一个静态方法，创建了一组简单的彩色容器：红，绿，蓝。在这里，我们依然让每个页面显示一个 Container 容器，通过 color 属性，为每个容器配置了不同的背景色（虽然不美，但可以让我们区分每个页面，你可以设置你喜欢的颜色）。
切换导航页面
现在，我们可以让用户点击不同的导航图标时，显示不同颜色的页面。
继续在 main.dart 文件中，找到下列这三行代码：
body: SafeArea(
child: Container(),
),
把其中第二行代码 child: Container(), , 替换为下面的代码：
child: pages[_selectedIndex],
保存文件。如果你已经打开虚拟机，保持程序运行，你就会发现白色的页面已经变成了红色页面。
验证效果
点击部件导航图标，可以看到绿色的页面：
点击设置导航图标，可以看到蓝色的页面：
虽然页面现在显示的内容比较简单，只是展示了不同的背景颜色，但是，随着我们不断的学习和探索，会让页面呈现更丰富的内容。
提交代码
我们已经实现了应用底部导航页面的切换，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。
git add .
git commit -m '实现应用导航页面的切换。'
