Flutter 圆形 TabBar 边框指示器答案

【问题标题】：Flutter rounded TabBar border indicatorFlutter 圆形 TabBar 边框指示器
【发布时间】：2021-06-22 06:55:38
【问题描述】：

我花了太多时间寻找类似的解决方案，但似乎地球上没有人实施这样的设计。我想用这样的指示器指示选中的 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'),
            ],
          ),
        )

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

【问题讨论】：

标签： flutter material-design flutter-layout

【解决方案1】：

谢谢，BabC。

这是最终结果：

class _TabIndicator extends Decoration {
  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,
    );
  }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：