Flutter 圆角 TabBar 边框指示器

Question

我花了太多时间寻找类似的解决方案，但似乎地球上没有人在实施这样的设计。我想用这样的指示符来指示选定的 TabBar 选项卡：

目前看起来是这样的：

当前TabBar代码：

        const TabBar(
            indicator: BoxDecoration(
              border: Border(
                top: BorderSide(color: Colors.blue, width: 5),
              ),
            ),
            labelPadding: EdgeInsets.zero,
            tabs: [
              _Tab(icon: Icons.home, text: 'Home'),
              _Tab(icon: Icons.settings, text: 'Settings'),
              _Tab(icon: Icons.cleaning_services, text: 'Clean'),
              _Tab(icon: Icons.construction, text: 'Service'),
              _Tab(icon: Icons.library_books, text: 'Resources'),
            ],
          ),
        )

有人知道这应该是什么样子吗？

Answer 1

您必须创建自己的装饰。看看这个指南：https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c

它在选项卡下创建了一个自定义点，因此您可以复制它来创建您喜欢的指标

Answer 2

谢谢，BabC。

这是最终结果：

class _TabIndicator extends BoxDecoration {
  final BoxPainter _painter;

  _TabIndicator() : _painter = _TabIndicatorPainter();

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _TabIndicatorPainter extends BoxPainter {
  final Paint _paint;

  _TabIndicatorPainter()
      : _paint = Paint()
          ..color = Colors.blue
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final double _xPos = offset.dx + cfg.size.width / 2;

    canvas.drawRRect(
      RRect.fromRectAndCorners(
        Rect.fromLTRB(_xPos - 20, 0, _xPos + 20, 5),
        bottomLeft: const Radius.circular(5.0),
        bottomRight: const Radius.circular(5.0),
      ),
      _paint,
    );
  }
}

Flutter 圆角 TabBar 边框指示器

Flutter rounded TabBar border indicator

material-design

flutter

flutter-layout