themeAnimationStyle property

Used to override the theme animation curve and duration.

If AnimationStyle.duration is provided, it will be used to override the theme animation duration in the underlying AnimatedTheme widget. If it is null, then themeAnimationDuration will be used. Otherwise, defaults to 200ms.

If AnimationStyle.curve is provided, it will be used to override the theme animation curve in the underlying AnimatedTheme widget. If it is null, then themeAnimationCurve will be used. Otherwise, defaults to Curves.linear.

To disable the theme animation, use AnimationStyle.noAnimation.

This sample showcases how to override the theme animation curve and duration in the MaterialApp widget 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 [MaterialApp].

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

enum AnimationStyles { defaultStyle, custom, none }

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

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

  @override
  State<MaterialAppExample> createState() => _MaterialAppExampleState();
}

class _MaterialAppExampleState extends State<MaterialAppExample> {
  Set<AnimationStyles> _animationStyleSelection = <AnimationStyles>{
    .defaultStyle,
  };
  AnimationStyle? _animationStyle;
  bool isDarkTheme = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeAnimationStyle: _animationStyle,
      themeMode: isDarkTheme ? .dark : .light,
      theme: ThemeData(colorSchemeSeed: Colors.green),
      darkTheme: ThemeData(colorSchemeSeed: Colors.green, brightness: .dark),
      home: Scaffold(
        body: Center(
          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: Duration(seconds: 1),
                        );
                      case AnimationStyles.none:
                        _animationStyle = .noAnimation;
                    }
                  });
                },
                segments: animationStyleSegments
                    .map<ButtonSegment<AnimationStyles>>((
                      (AnimationStyles, String) shirt,
                    ) {
                      return ButtonSegment<AnimationStyles>(
                        value: shirt.$1,
                        label: Text(shirt.$2),
                      );
                    })
                    .toList(),
              ),
              const SizedBox(height: 10),
              OutlinedButton.icon(
                onPressed: () {
                  setState(() {
                    isDarkTheme = !isDarkTheme;
                  });
                },
                icon: Icon(
                  isDarkTheme ? Icons.wb_sunny : Icons.nightlight_round,
                ),
                label: const Text('Switch Theme Mode'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Implementation

MaterialApp class