flutter/examples/api/lib/material/app/app.0.dart
Taha Tesser fc917c7184
[Reland] Introduce AnimationStyle (#138721)
This PR introduces `AnimationStyle`, it is used to override default
animation curves and durations in several widgets.

fixes [Add the ability to customize MaterialApp theme animation
duration](https://github.com/flutter/flutter/issues/78372)
fixes [Allow customization of showMenu transition animation curves and
duration](https://github.com/flutter/flutter/issues/135638)
fixes [`AnimationStyle.noAnimation` needs to replace `AnimatedTheme`
with just `Theme` in the
`MaterialApp`](https://github.com/flutter/flutter/issues/138618)

Here is an example where popup menu curve and transition duration is
overridden:

```dart
          popUpAnimationStyle: AnimationStyle(
            curve: Easing.emphasizedAccelerate,
            duration: Durations.medium4,
          ),
```

Set `AnimationStyle.noAnimation` to disable animation.
```dart
    return MaterialApp(
      themeAnimationStyle: AnimationStyle.noAnimation,
```

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#overview
[Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene
[test-exempt]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
[Discord]: https://github.com/flutter/flutter/wiki/Chat
2023-11-20 15:24:41 -08:00

88 lines
3.0 KiB
Dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
/// Flutter code sample for [MaterialApp].
void main() {
runApp(const MaterialAppExample());
}
enum AnimationStyles { defaultStyle, custom, none }
const List<(AnimationStyles, String)> animationStyleSegments = <(AnimationStyles, String)>[
(AnimationStyles.defaultStyle, 'Default'),
(AnimationStyles.custom, 'Custom'),
(AnimationStyles.none, 'None'),
];
class MaterialAppExample extends StatefulWidget {
const MaterialAppExample({super.key});
@override
State<MaterialAppExample> createState() => _MaterialAppExampleState();
}
class _MaterialAppExampleState extends State<MaterialAppExample> {
Set<AnimationStyles> _animationStyleSelection = <AnimationStyles>{AnimationStyles.defaultStyle};
AnimationStyle? _animationStyle;
bool isDarkTheme = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
themeAnimationStyle: _animationStyle,
themeMode: isDarkTheme ? ThemeMode.dark : ThemeMode.light,
theme: ThemeData(colorSchemeSeed: Colors.green),
darkTheme: ThemeData(
colorSchemeSeed: Colors.green,
brightness: Brightness.dark,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: 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 = AnimationStyle(
curve: Easing.emphasizedAccelerate,
duration: const Duration(seconds: 1),
);
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: 10),
OutlinedButton.icon(
onPressed: () {
setState(() {
isDarkTheme = !isDarkTheme;
});
},
icon: Icon(isDarkTheme ? Icons.wb_sunny : Icons.nightlight_round),
label: const Text('Switch Theme Mode'),
),
],
),
),
),
);
}
}