indicatorAnimation property

Specifies the animation behavior of the tab indicator.

If this is null, then the value of TabBarThemeData.indicatorAnimation is used. If that is also null, then the tab indicator will animate linearly if the indicatorSize is TabBarIndicatorSize.tab, otherwise it will animate with an elastic effect if the indicatorSize is TabBarIndicatorSize.label.

This sample shows how to customize the animation behavior of the tab indicator by using the indicatorAnimation property.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [TabBar.indicatorAnimation].

void main() => runApp(const IndicatorAnimationExampleApp());

class IndicatorAnimationExampleApp extends StatelessWidget {
  const IndicatorAnimationExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: IndicatorAnimationExample());
  }
}

const List<(TabIndicatorAnimation, String)> indicatorAnimationSegments =
    <(TabIndicatorAnimation, String)>[
      (TabIndicatorAnimation.linear, 'Linear'),
      (TabIndicatorAnimation.elastic, 'Elastic'),
    ];

class IndicatorAnimationExample extends StatefulWidget {
  const IndicatorAnimationExample({super.key});

  @override
  State<IndicatorAnimationExample> createState() =>
      _IndicatorAnimationExampleState();
}

class _IndicatorAnimationExampleState extends State<IndicatorAnimationExample> {
  Set<TabIndicatorAnimation> _animationStyleSelection = <TabIndicatorAnimation>{
    TabIndicatorAnimation.linear,
  };
  TabIndicatorAnimation _tabIndicatorAnimation = .linear;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Indicator Animation Example'),
          bottom: TabBar(
            indicatorAnimation: _tabIndicatorAnimation,
            isScrollable: true,
            tabAlignment: .start,
            tabs: const <Widget>[
              Tab(text: 'Short Tab'),
              Tab(text: 'Very Very Very Long Tab'),
              Tab(text: 'Short Tab'),
              Tab(text: 'Very Very Very Long Tab'),
              Tab(text: 'Short Tab'),
              Tab(text: 'Very Very Very Long Tab'),
            ],
          ),
        ),
        body: Column(
          children: <Widget>[
            const SizedBox(height: 16),
            SegmentedButton<TabIndicatorAnimation>(
              selected: _animationStyleSelection,
              onSelectionChanged: (Set<TabIndicatorAnimation> styles) {
                setState(() {
                  _animationStyleSelection = styles;
                  _tabIndicatorAnimation = styles.first;
                });
              },
              segments: indicatorAnimationSegments
                  .map<ButtonSegment<TabIndicatorAnimation>>((
                    (TabIndicatorAnimation, String) shirt,
                  ) {
                    return ButtonSegment<TabIndicatorAnimation>(
                      value: shirt.$1,
                      label: Text(shirt.$2),
                    );
                  })
                  .toList(),
            ),
            const SizedBox(height: 16),
            const Expanded(
              child: TabBarView(
                children: <Widget>[
                  Center(child: Text('Short Tab Page')),
                  Center(child: Text('Very Very Very Long Tab Page')),
                  Center(child: Text('Short Tab Page')),
                  Center(child: Text('Very Very Very Long Tab Page')),
                  Center(child: Text('Short Tab Page')),
                  Center(child: Text('Very Very Very Long Tab Page')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Implementation

TabBar class