在页面底部这里会显示一个 BottomNavigationBar，下面我们把它单独放在一个文件里，打开 app.dart，剪切一下 Scaffold 小部件的 bottomNavigationBar 参数的值，这里就是一个 BottomNavigationBar 小部件。

然后新建一个文件，放在 lib/app/components 里面，名字是 app_page_bottom.dart，在这个文件里定义一个小部件，名字叫 AppPageBottom， 把剪切的东西作为这个小部件的 build 方法 return 的东西。

在这个小部件里面要声明两个东西，一个是 int 类型的属性，名字是 currentIndex， 再声明一个方法，类型是 ValueChanged? 名字是 onTap。

添加一个构造方法，AppPageBottom，添加两个参数，this.onTap ，再添加一个 this.currentIndex，默认值是 0 。

修改一下 BottomNavigationBar 小部件的 currentIndex，让 AppPageBotton 小部件里的 currentIndex 属性作为这个参数的值。

再修改一下 onTap 参数，让小部件里的 onTap 作为这个参数的值。

打开 App 小部件，这里可以让 AppPageBottom 作为 Scaffold 小部件的 bottomNavigationBar 参数的值，使用这个小部件可以设置一下它的 currentIndex 参数，对应的值是 currentAppBottomNavigationBarItem，再设置一下它的 onTap，值是 onTapAppBottomNavigationBarItem。

在模拟器再测试一下，点按底部导航栏上的项目，可以切换显示不同的小部件。