expansionAnimationStyle property

Used to override the expansion animation curve and duration.

If AnimationStyle.duration is provided, it will be used to override the expansion animation duration. If it is null, then AnimationStyle.duration from the ExpansionTileThemeData.expansionAnimationStyle will be used. Otherwise, defaults to 200ms.

If AnimationStyle.curve is provided, it will be used to override the expansion animation curve. If it is null, then AnimationStyle.curve from the ExpansionTileThemeData.expansionAnimationStyle will be used. Otherwise, defaults to Curves.easeIn.

If AnimationStyle.reverseCurve is provided, it will be used to override the collapse animation curve. If it is null, then AnimationStyle.reverseCurve from the ExpansionTileThemeData.expansionAnimationStyle will be used. Otherwise, the same curve will be used as for expansion.

To disable the theme animation, use AnimationStyle.noAnimation.

This sample showcases how to override the ExpansionTile expansion animation curve and duration using AnimationStyle.

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

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [ExpansionTile] and [AnimationStyle].

void main() {
  runApp(const ExpansionTileAnimationStyleApp());
}

enum AnimationStyles { defaultStyle, custom, none }

const List<(AnimationStyles, String)> animationStyleSegments =
    <(AnimationStyles, String)>[
      (AnimationStyles.defaultStyle, 'Default'),
      (AnimationStyles.custom, 'Custom'),
      (AnimationStyles.none, 'None'),
    ];

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

  @override
  State<ExpansionTileAnimationStyleApp> createState() =>
      _ExpansionTileAnimationStyleAppState();
}

class _ExpansionTileAnimationStyleAppState
    extends State<ExpansionTileAnimationStyleApp> {
  Set<AnimationStyles> _animationStyleSelection = <AnimationStyles>{
    AnimationStyles.defaultStyle,
  };
  AnimationStyle? _animationStyle;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: .center,
            children: <Widget>[
              SegmentedButton<AnimationStyles>(
                selected: _animationStyleSelection,
                onSelectionChanged: (Set<AnimationStyles> styles) {
                  setState(() {
                    _animationStyleSelection = styles;
                    switch (styles.first) {
                      case AnimationStyles.defaultStyle:
                        _animationStyle = null;
                      case AnimationStyles.custom:
                        _animationStyle = const AnimationStyle(
                          curve: Easing.emphasizedAccelerate,
                          duration: Durations.extralong1,
                        );
                      case AnimationStyles.none:
                        _animationStyle = AnimationStyle.noAnimation;
                    }
                  });
                },
                segments: animationStyleSegments
                    .map<ButtonSegment<AnimationStyles>>((
                      (AnimationStyles, String) shirt,
                    ) {
                      return ButtonSegment<AnimationStyles>(
                        value: shirt.$1,
                        label: Text(shirt.$2),
                      );
                    })
                    .toList(),
              ),
              const SizedBox(height: 20),
              ExpansionTile(
                expansionAnimationStyle: _animationStyle,
                title: const Text('ExpansionTile'),
                children: const <Widget>[
                  ListTile(title: Text('Expanded Item 1')),
                  ListTile(title: Text('Expanded Item 2')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Implementation

ExpansionTile class