在Flutter中向BottomNavigationBar添加指示器

2w3kk1z5  于 2022-11-30  发布在  Flutter
关注(0)|答案(2)|浏览(245)

是否有任何方法可以像此图像一样将指示器添加到BottomNavigatorBarItem?

8yparm6h

8yparm6h1#

This包应该能够帮助您实现这一点。

ghg1uchk

ghg1uchk2#

您可以使用TabBar,而不是使用自订装饰的BottomNavigationBar

class TopIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _TopIndicatorBox();
  }
}

class _TopIndicatorBox extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Paint _paint = Paint()
      ..color = Colors.lightblue
      ..strokeWidth = 5
      ..isAntiAlias = true;

    canvas.drawLine(offset, Offset(cfg.size!.width + offset.dx, 0), _paint);
  }
}

然后使用TapBar(indicator: TopIndicator ...)将装饰传递到TapBar。

要将TabBar用作Scaffold.bottomNavigationBar,您很可能希望将其 Package 在Material中以应用背景色:

Scaffold(
  bottomNavigationBar: Material(
    color: Colors.white,
    child: TabBar(
      indicator: TopIndicator(),
      tabs: const <Widget>[
        Tab(icon: Icon(Icons.home_outlined), text: 'Reward'),
        ...
      ],
    ),
  ),
  ...
)

感谢Ara Kurghinyan的原创创意。

相关问题