-
Notifications
You must be signed in to change notification settings - Fork 3.7k
[Animations] add example to openCntainer
#11189
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
9b3ef93
c4471d5
e91081a
62f0c22
e526b2f
ad3034c
f72d00f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -66,7 +66,46 @@ typedef ClosedCallback<S> = void Function(S data); | |
| /// `T` refers to the type of data returned by the route when the container | ||
| /// is closed. This value can be accessed in the `onClosed` function. | ||
| /// | ||
| // TODO(goderbauer): Add example animations and sample code. | ||
| /// The following example shows an [OpenContainer] that transforms a blue | ||
| /// container widget into a full screen page using the Material container | ||
| /// transform animation. When the user taps the closed widget, the container | ||
| /// expands and morphs into the destination page defined in [openBuilder], | ||
| /// while the original widget from [closedBuilder] fades out during the | ||
| /// transition. | ||
| /// | ||
| /// ```dart | ||
| /// OpenContainer( | ||
| /// transitionDuration: const Duration(milliseconds: 500), | ||
| /// transitionType: ContainerTransitionType.fadeThrough, | ||
| /// openBuilder: (context, action) { | ||
| /// return Scaffold( | ||
| /// appBar: AppBar(title: const Text('Details Page')), | ||
| /// body: const Center( | ||
| /// child: Text( | ||
| /// 'This page opened with Container Transform animation', | ||
| /// style: TextStyle(fontSize: 18), | ||
| /// textAlign: TextAlign.center, | ||
| /// ), | ||
| /// ), | ||
| /// ); | ||
| /// }, | ||
| /// closedBuilder: (context, action) { | ||
| /// return Container( | ||
| /// width: 200, | ||
| /// height: 120, | ||
| /// alignment: Alignment.center, | ||
| /// decoration: BoxDecoration( | ||
| /// color: Colors.blue, | ||
| /// borderRadius: BorderRadius.circular(16), | ||
| /// ), | ||
| /// child: const Text( | ||
| /// 'Open Details', | ||
| /// style: TextStyle(color: Colors.white, fontSize: 18), | ||
| /// ), | ||
| /// ); | ||
| /// }, | ||
| /// ), | ||
|
Comment on lines
+77
to
+107
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For a clearer and more idiomatic example, I have a few suggestions:
I've applied these changes in the suggestion. /// OpenContainer(
/// transitionDuration: const Duration(milliseconds: 500),
/// transitionType: ContainerTransitionType.fadeThrough,
/// openBuilder: (context, _) {
/// return Scaffold(
/// appBar: AppBar(title: const Text('Details Page')),
/// body: const Center(
/// child: Text(
/// 'This page opened with Container Transform animation',
/// style: TextStyle(fontSize: 18),
/// textAlign: TextAlign.center,
/// ),
/// ),
/// );
/// },
/// closedBuilder: (context, _) {
/// return Container(
/// width: 200,
/// height: 120,
/// alignment: Alignment.center,
/// decoration: BoxDecoration(
/// color: Colors.blue,
/// borderRadius: BorderRadius.circular(16),
/// ),
/// child: const Text(
/// 'Open Details',
/// style: TextStyle(color: Colors.white, fontSize: 18),
/// ),
/// );
/// },
/// ),References
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. valid point. |
||
| /// ``` | ||
| /// | ||
| /// See also: | ||
| /// | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.