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

謝謝，巴布克。

這是最終結果：

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,
    );
  }
}