Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/animations/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## NEXT
## 2.1.2

* Updates minimum supported SDK version to Flutter 3.35/Dart 3.9.
* Adds an example of using `OpenContainer`

## 2.1.1

Expand Down
41 changes: 40 additions & 1 deletion packages/animations/lib/src/open_container.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
/// ),
Comment thread
AbdeMohlbi marked this conversation as resolved.
/// ),
/// );
/// },
/// 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
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For a clearer and more idiomatic example, I have a few suggestions:

  • In closedBuilder, the GestureDetector is redundant because OpenContainer is tappable by default. It's simpler to rely on the default behavior. The action callback is useful for more complex scenarios, like when tappable is set to false.
  • The action parameters in both openBuilder and closedBuilder are unused in this example. It's a good practice to rename them to _ to signify they are intentionally ignored.
  • Per the Dart style guide, it's preferred to use single quotes for strings.

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
  1. DO use single quotes for strings. (link)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

valid point.
not sure about the action with _.
valid point for single quotes.

/// ```
///
/// See also:
///
Expand Down
2 changes: 1 addition & 1 deletion packages/animations/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: animations
description: Fancy pre-built animations that can easily be integrated into any Flutter application.
repository: https://github.com/flutter/packages/tree/main/packages/animations
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+animations%22
version: 2.1.1
version: 2.1.2

environment:
sdk: ^3.9.0
Expand Down
Loading