如何修改Flutter TabBar指示器的动画时长与easeOutBack曲线？

希望将Flutter TabBar中指示器的动画时长和动画曲线修改为easeOutBack，效果如下：

当前使用的代码如下：

void initState() {
    _tabController = TabController(
      length: 3,
      vsync: this,)..addListener(() {
        setState(() {
          _selectedIndex = _tabController.index;
        });
      });
    super.initState();
  }



    Container(
                  height: 57.35,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(28.67),
                  ),
                  child: TabBar(
                    onTap: (index) {
                      _selectedIndex = index;
                    },
                    padding: EdgeInsets.symmetric(horizontal: 37.72),
                    controller: _tabController,
                    indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(28.67),
                      color: Colors.red,
                    ),
                    tabs: [
                      Tab(
                        icon: Icon(Icons.person,
                            color: _tabController.index == 0
                                ? Colors.white
                                : Colors.grey),
                      ),
                      Tab(
                        icon: Icon(Icons.settings,
                            color: _tabController.index == 1
                                ? Colors.white
                                : Colors.grey),
                      ),
                      Tab(
                        icon: Icon(Icons.home,
                            color: _tabController.index == 2
                                ? Colors.white
                                : Colors.grey),
                      ),
                    ],
                  ),
                ), 

Flutter原生TabBar没有直接提供修改指示器动画的参数，以下两种方法可实现自定义easeOutBack曲线和时长的动画效果：

方法一：用AnimatedContainer模拟指示器（简单直观） #

隐藏原生指示器，通过AnimatedContainer单独实现可动画的指示器，用TabController索引控制位置：

late TabController _tabController;
int _selectedIndex = 0;

@override
void initState() {
  super.initState();
  _tabController = TabController(
    length: 3,
    vsync: this,
  )..addListener(() {
      setState(() {
        _selectedIndex = _tabController.index;
      });
    });
}

@override
Widget build(BuildContext context) {
  final tabWidth = (MediaQuery.of(context).size.width - 37.72 * 2) / 3;
  
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        Container(
          height: 57.35,
          margin: const EdgeInsets.symmetric(horizontal: 37.72),
          child: Stack(
            children: [
              // 自定义动画指示器
              AnimatedContainer(
                duration: const Duration(milliseconds: 500), // 自定义动画时长
                curve: Curves.easeOutBack,
                margin: EdgeInsets.only(left: _selectedIndex * tabWidth),
                width: tabWidth,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(28.67),
                  color: Colors.red,
                ),
              ),
              // 无指示器的TabBar
              TabBar(
                onTap: (index) => setState(() => _selectedIndex = index),
                padding: EdgeInsets.zero,
                controller: _tabController,
                indicator: const BoxDecoration(), // 隐藏原生指示器
                tabs: [
                  Tab(
                    icon: Icon(Icons.person,
                        color: _selectedIndex == 0 ? Colors.white : Colors.grey),
                  ),
                  Tab(
                    icon: Icon(Icons.settings,
                        color: _selectedIndex == 1 ? Colors.white : Colors.grey),
                  ),
                  Tab(
                    icon: Icon(Icons.home,
                        color: _selectedIndex == 2 ? Colors.white : Colors.grey),
                  ),
                ],
              ),
            ],
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: const [
              Center(child: Text("页面1")),
              Center(child: Text("页面2")),
              Center(child: Text("页面3")),
            ],
          ),
        ),
      ],
    ),
  );
}

方法二：自定义指示器（灵活扩展） #

继承Decoration实现支持自定义动画的指示器，适合复杂场景：

class CustomTabIndicator extends Decoration {
  final Color color;
  final double radius;
  final Curve curve;
  final Duration duration;

  const CustomTabIndicator({
    required this.color,
    required this.radius,
    this.curve = Curves.easeOutBack,
    this.duration = const Duration(milliseconds: 500),
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomIndicatorPainter(this, onChanged);
  }
}

class _CustomIndicatorPainter extends BoxPainter {
  final CustomTabIndicator decoration;
  double _currentPosition = 0.0;
  late final AnimationController _controller;
  late final Animation<double> _animation;

  _CustomIndicatorPainter(this.decoration, VoidCallback? onChanged) : super(onChanged) {
    _controller = AnimationController(
      duration: decoration.duration,
      vsync: WidgetsBinding.instance,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: decoration.curve,
    )..addListener(() => onChanged?.call());
  }

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final tabWidth = configuration.size!.width;
    final targetPosition = configuration.textDirection == TextDirection.ltr
        ? offset.dx + _currentPosition * tabWidth
        : offset.dx + (configuration.size!.width - (_currentPosition + 1) * tabWidth);

    final rect = Rect.fromLTWH(
      targetPosition,
      offset.dy,
      tabWidth,
      configuration.size!.height,
    );
    final paint = Paint()..color = decoration.color;
    canvas.drawRRect(
      RRect.fromRectAndRadius(rect, Radius.circular(decoration.radius)),
      paint,
    );
  }

  void updatePosition(double position) {
    _controller.reset();
    _currentPosition = position;
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

页面中使用自定义指示器：

late TabController _tabController;
late CustomTabIndicator _customIndicator;
int _selectedIndex = 0;

@override
void initState() {
  super.initState();
  _customIndicator = const CustomTabIndicator(
    color: Colors.red,
    radius: 28.67,
    curve: Curves.easeOutBack,
    duration: Duration(milliseconds: 500),
  );
  
  _tabController = TabController(
    length: 3,
    vsync: this,
  )..addListener(() {
      if (_tabController.indexIsChanging) {
        _customIndicator.createBoxPainter().updatePosition(_tabController.index.toDouble());
      }
      setState(() => _selectedIndex = _tabController.index);
    });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        Container(
          height: 57.35,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(28.67),
          ),
          child: TabBar(
            onTap: (index) => setState(() => _selectedIndex = index),
            padding: const EdgeInsets.symmetric(horizontal: 37.72),
            controller: _tabController,
            indicator: _customIndicator, // 使用自定义指示器
            tabs: [
              Tab(
                icon: Icon(Icons.person,
                    color: _selectedIndex == 0 ? Colors.white : Colors.grey),
              ),
              Tab(
                icon: Icon(Icons.settings,
                    color: _selectedIndex == 1 ? Colors.white : Colors.grey),
              ),
              Tab(
                icon: Icon(Icons.home,
                    color: _selectedIndex == 2 ? Colors.white : Colors.grey),
              ),
            ],
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: const [
              Center(child: Text("页面1")),
              Center(child: Text("页面2")),
              Center(child: Text("页面3")),
            ],
          ),
        ),
      ],
    ),
  );
}

内容的提问来源于stack exchange，提问作者ILii