Flutter：如何使用邊框半徑制作自定義下划線選項卡指示器

Question

如何制作指標：帶邊框半徑的 UnderlinetabIndicator？ 這種裝飾不喜歡具有邊框半徑的下划線輸入邊框。

我試圖用 ShapeDecoration(UnderlineInputBorder) 來實現它。 但是 shapeDecoration 的大小從選項卡小部件中計算，所以我不能有正確的borderRadius topright 和 topleft。

編輯：期望

代碼：

*不要介意顏色，它只是為了調試目的。

TabBar(
                  controller: _tabController,
                  labelStyle:
                      TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
                  indicatorWeight: 10.0,
                  unselectedLabelColor: Colors.black,
                  labelColor: Colors.black,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 5.0,
                      color: HexColor("2C7381"),
                    ),
                    insets:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 0),
                  ),
                  tabs: [
                    Container(
                      color: Colors.amber,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Column(
                          children: [
                            Image.asset(
                              _activeIndex == 0
                                  ? "assets/icons/dummy1.png"
                                  : "assets/icons/dummy2.png",
                              height: 20,
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            Text(
                              "TAB 0",
                              style: Dummytheme.text14theme,
                              textAlign: TextAlign.center,
                            ),
                          ],
                        ),
                      ),
                    ),

Answer 1

你可以使用這個參數

import 'package:flutter/material.dart';

class CustomTabIndicator extends Decoration {
  final double radius;

  final Color color;


  final double indicatorHeight;

  const CustomTabIndicator({
    this.radius = 8,
    this.indicatorHeight = 4,
    this.color = Colors.red,
  });

  @override
  _CustomPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomPainter(
      this,
      onChanged,
      radius,
      color,
      indicatorHeight,
    );
  }
}

class _CustomPainter extends BoxPainter {
  final CustomTabIndicator decoration;
  final double radius;
  final Color color;
  final double indicatorHeight;

  _CustomPainter(
      this.decoration,
      VoidCallback? onChanged,
      this.radius,
      this.color,
      this.indicatorHeight,
      ) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration.size != null);

    final Paint paint = Paint();
    double xAxisPos = offset.dx + configuration.size!.width / 2;
    double yAxisPos = offset.dy + configuration.size!.height - indicatorHeight/2;
    paint.color = color;

    RRect fullRect = RRect.fromRectAndCorners(
      Rect.fromCenter(
        center: Offset(xAxisPos, yAxisPos),
        width: configuration.size!.width / 3,
        height: indicatorHeight,
      ),
      topLeft: Radius.circular(radius),
      topRight: Radius.circular(radius),
    );

    canvas.drawRRect(fullRect, paint);
  }
}

使用：指標：CustomTabIndicator()，