Flutter中如何实现如图所示的导航按钮指示器？

最快最优的实现方案就是直接使用Flutter官方自带的BottomNavigationBar组件，不需要额外自定义封装组件，原生组件已经做了全平台交互适配、性能优化，开发成本最低，还原度最高。

关于你问的两个组件是否可用，答案如下：

• 完全可以用BottomNavigationBar实现，你的参考样式就是标准的底部导航栏布局，只需要配置对应属性就能1:1还原效果，核心可配置参数：
  • 用items属性配置每个导航项的图标和文字内容
  • 用selectedItemColor、unselectedItemColor分别设置选中和未选中状态下的图标、文字颜色
  • 把type设置为BottomNavigationBarType.fixed，就能保证导航项数量超过3个时也保持固定布局，不会出现默认的移位动效
  • 用currentIndex绑定当前选中项的索引，配合onTap回调切换对应页面即可
• 技术上也可以用多个TextButton组合实现，但完全没必要这么做：自己组合需要额外处理选中状态管理、点击水波纹效果、自适应布局、多端适配等逻辑，开发效率低，性能也不如原生BottomNavigationBar，只有当你有非常特殊的自定义动效需求时，才需要考虑自己封装。

最简实现示例代码 #

int _selectedIndex = 0;
final List<Widget> _pages = [HomePage(), SearchPage(), FavoritePage(), ProfilePage()];

@override
Widget build(BuildContext context) {
  return Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.blue,
      unselectedItemColor: Colors.grey,
      onTap: (index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: '搜索',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          label: '收藏',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: '我的',
        ),
      ],
    ),
    body: _pages[_selectedIndex],
  );
}

内容的提问来源于stack exchange，提问作者Tony Vargek