如何设置和自定义Flutter的BottomNavigationBar中的指示器？

Question

我想自定义 BottomNavigationBar 中所选项目的指示器外观。

bottomNavigationBar: BottomNavigationBar(
        backgroundColor: ColorConstants.blackcolor,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.check_circle_outline_outlined),
            label: "prime",
          ),
          BottomNavigationBarItem(
            icon: Icon(TablerIcons.layout_grid_add),
            label: "Subscriptions",
          ),
          BottomNavigationBarItem(
            icon: Icon(TablerIcons.download),
            label: "Downloads",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Search",
          ),
        ],
        type: BottomNavigationBarType.fixed,
        selectedItemColor: ColorConstants.whitecolor,
        unselectedItemColor: ColorConstants.greycolor,
        unselectedFontSize: 9,
        selectedFontSize: 10,
        onTap: (value) {
          setState(() {
            index = value;
          });
        },
        currentIndex: index,
      ),

这是说明所需输出的图像

Answer 1

这是一种实现方法。

class GradientBlack extends StatefulWidget {
  const GradientBlack({super.key, required this.onTabChanged});

  final ValueChanged<int> onTabChanged;

  @override
  State<GradientBlack> createState() => _GradientBlackState();
}

class _GradientBlackState extends State<GradientBlack> {
  int index = 0;
  final items = const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: "Home",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.check_circle_outline_outlined),
      label: "prime",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: "Home",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.check_circle_outline_outlined),
      label: "prime",
    ),
  ];

  final radius = 96.0;

  double get left {
    final vw = MediaQuery.sizeOf(context).width;
    final itemWidth = vw / items.length;
    return itemWidth * index + (itemWidth / 2 - radius / 2);
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          AnimatedPositioned(
            left: left,
            top: -radius / 3,
            duration: Durations.medium2,
            child: DecoratedBox(
              decoration: const BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.white, Colors.transparent],
                ),
              ),
              child: SizedBox.square(
                dimension: radius,
              ),
            ),
          ),
          BottomNavigationBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            items: items,
            type: BottomNavigationBarType.fixed,
            selectedItemColor: Colors.white,
            unselectedItemColor: Colors.grey,
            unselectedFontSize: 9,
            selectedFontSize: 10,
            onTap: (value) {
              widget.onTabChanged(value);
              setState(() {
                index = value;
              });
            },
            currentIndex: index,
          ),
        ],
      ),
    );
  }
}

在 dartPad 或 gist 上玩它，你可以像这样使用吗？

bottomNavigationBar: GradientBlack(
 onTabChanged: (v) {},
),