如何实现具有这些功能的底部导航栏？

Question

1. 共有五个导航项，宽度为154,153,154,153,154。我知道这有点奇怪，但 UI 设计是这样的。至于这个，我想我不能在颤振库中使用任何关于 navigator 的小部件。
2. 与往常一样，每个项目都包含一个icon 和一个text，但两者之间的距离应准确设置。不知道能不能在flutter widget中设置bottomNavigatorBar。
3. 通常，图标、文本和背景的颜色会在选中时发生变化。

我所做的：我创建了一个小部件并将其添加到每个页面的底部。可以想象，当跳转到新页面时，导航栏会重新渲染。这与我们在手机中使用的不同。

我找到了一些文章和博客，但仍然无法解决我的问题。有参考吗？

Answer 1

您可以使用以下代码将此页面重定向到 main.dart 中，也可以使用测试和图标。

class nav extends StatefulWidget {
  @override
  _navState createState() => _navState();
}

class _navState extends State<nav> {
  int tabIndex = 0;
  List<Widget> listScreens;

  @override
  void initState() {
    ScreenUtil.init(width: 375, height: 812);
    super.initState();

    listScreens = [
      Home(),
      Treatments(),
      Request(),
      Appointments(),
      Menu(),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: listScreens[tabIndex],
          bottomNavigationBar: new Theme(
            data: Theme.of(context).copyWith(
                canvasColor: Color(0xFF320151),
                primaryColor: Color(0xFF320151)),
            child: BottomNavigationBar(
                backgroundColor: Color(0xFF38095c),
                selectedItemColor: Color(0xFFe34fd1),
                unselectedItemColor: Color(0xFF510382),
                currentIndex: tabIndex,
                onTap: (int index) {
                  setState(() {
                    tabIndex = index;
                  });
                },
                items: [
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 154, child: Center(child: Icon(AntDesign.home))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 153,
                        child: Center(
                            child: Icon(MaterialCommunityIcons.medical_bag))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 154,
                        child: Center(child: Icon(Fontisto.share_a))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 153,
                        child: Center(child: Icon(AntDesign.calendar))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 154,
                        child: Center(child: Icon(Ionicons.ios_person))),
                  ),
                ]),
          )),
    );
  }
}