flutter/examples/api/lib/material/popup_menu/popup_menu.2.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

130 lines
4.6 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 [PopupMenuButton].
void main() => runApp(const PopupMenuApp());
class PopupMenuApp extends StatelessWidget {
const PopupMenuApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: PopupMenuExample(),
);
}
}
enum AnimationStyles { defaultStyle, custom, none }
const List<(AnimationStyles, String)> animationStyleSegments = <(AnimationStyles, String)>[
(AnimationStyles.defaultStyle, 'Default'),
(AnimationStyles.custom, 'Custom'),
(AnimationStyles.none, 'None'),
];
enum Menu { preview, share, getLink, remove, download }
class PopupMenuExample extends StatefulWidget {
const PopupMenuExample({super.key});
@override
State<PopupMenuExample> createState() => _PopupMenuExampleState();
}
class _PopupMenuExampleState extends State<PopupMenuExample> {
Set<AnimationStyles> _animationStyleSelection = <AnimationStyles>{AnimationStyles.defaultStyle};
AnimationStyle? _animationStyle;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 50),
child: Align(
alignment: Alignment.topCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
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.emphasizedDecelerate,
duration: const Duration(seconds: 3),
);
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),
PopupMenuButton<Menu>(
popUpAnimationStyle: _animationStyle,
icon: const Icon(Icons.more_vert),
onSelected: (Menu item) { },
itemBuilder: (BuildContext context) => <PopupMenuEntry<Menu>>[
const PopupMenuItem<Menu>(
value: Menu.preview,
child: ListTile(
leading: Icon(Icons.visibility_outlined),
title: Text('Preview'),
),
),
const PopupMenuItem<Menu>(
value: Menu.share,
child: ListTile(
leading: Icon(Icons.share_outlined),
title: Text('Share'),
),
),
const PopupMenuItem<Menu>(
value: Menu.getLink,
child: ListTile(
leading: Icon(Icons.link_outlined),
title: Text('Get link'),
),
),
const PopupMenuDivider(),
const PopupMenuItem<Menu>(
value: Menu.remove,
child: ListTile(
leading: Icon(Icons.delete_outline),
title: Text('Remove'),
),
),
const PopupMenuItem<Menu>(
value: Menu.download,
child: ListTile(
leading: Icon(Icons.download_outlined),
title: Text('Download'),
),
),
],
),
],
),
),
),
),
);
}
}