Flutter 如何将页面添加到此类型的底部栏？

我一直在尝试创建一个聊天应用程序，而我是一个新手。如何将页面添加到底部栏的选项卡式视图中，并显示其特定页面？例如，聊天选项卡的聊天屏幕和配置文件选项卡的配置文件页面。页面之间的导航应该是流畅的

这是我的底部条形码。省道代码：

import 'package:flutter/material.dart';
import 'package:messenger_clone/animated_bottom_bar.dart';

class ButtomBar extends StatefulWidget {
  static const String id = 'buttom_bar';
  final List<BarItem> barItems = [
    BarItem(
      text: "Chats",
      iconData: Icons.chat_bubble_outline,
      color: Colors.indigo,
    ),
    BarItem(
      text: "People",
      iconData: Icons.people_outline,
      color: Colors.pinkAccent,
    ),
    BarItem(
      text: "Search",
      iconData: Icons.search,
      color: Colors.yellow.shade900,
    ),
    BarItem(
      text: "Profile",
      iconData: Icons.person_outline,
      color: Colors.teal,
    ),
  ];

  @override
  _ButtomBar createState() =>
      _ButtomBar();
}

class _ButtomBar
    extends State<ButtomBar> {
  int selectedBarIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: AnimatedBottomBar(
          barItems: widget.barItems,
          animationDuration: const Duration(milliseconds: 150),
          barStyle: BarStyle(
            fontSize: 20.0,
            iconSize: 30.0
          ),
          onBarTap: (index) {
            setState(() {
              selectedBarIndex = index;
            });
          }),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:messenger\u clone/animated\u bottom\u bar.dart”；
类ButtomBar扩展StatefulWidget{
静态常量字符串id='buttom_bar'；
最终列表参数=[
男侍者(
文字：“聊天”，
Iconda:Icons.chat\u bubble\u大纲，
颜色：颜色，靛蓝，
),
男侍者(
文字：“人”，
Iconda:Icons.people\u大纲，
颜色：Colors.pinkAccent，
),
男侍者(
文本：“搜索”，
Iconda:Icons.search，
颜色：Colors.yellow.shade900，
),
男侍者(
文字：“个人资料”，
Iconda:Icons.person\u大纲，
颜色：Colors.teal，
),
];
@凌驾
_按钮BAR createState（）=>
_按钮杆（）；
}
班机
扩展状态{
int selectedBarIndex=0；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
底部导航栏：动画底部导航栏(
barItems:widget.barItems，
animationDuration:常量持续时间（毫秒：150），
酒吧风格：酒吧风格(
字体大小：20.0，
iconSize:30.0
),
onBarTap：（索引）{
设置状态（）{
selectedBarIndex=索引；
});
}),
);
}
}

---

因此，点击不同的图标可以像滚动条一样导航到其他图标。通常，当应用程序有底部栏时，它们会重新加载脚手架主体，而不是滑动到下一个屏幕。查看Youtube，Reddit，WhatsApp，他们都重建了身体。 要做到这一点，您只需创建一个小部件列表，如下所示：

List screenList=[HomePage（）、ChatPage（）、SearchPage（）]
然后你把它放在脚手架上：

return Scaffold(
      body: screenList[selectedBarIndex]
      bottomNavigationBar: AnimatedBottomBar(
          ...
      )
    );


现在，如果您真的想让它滑动，它将更加复杂，因为您可能需要创建一个自定义页面路由。
看看这篇文章：

他制作了一个持久的AppBar，所以它一定是类似的