Material Transitions in Flutter with the Animations Package

Sep 21 2021 Dart 2.13, Flutter, VS Code 1.59

Part 1: Material Transitions in Flutter with the Animations Package

2. Understand the Container Transform Animation

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 1. Get Introduced to the Material Motion System Next episode: 3. Create a FadeThrough Animation

This video was last updated on Sep 21 2021

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Let’s dive deeper into the OpenContainer widget by using it with a custom widget. For this episode, we’ll be animating the card from the home to the detail page. Currently, if we click the card, it navigates to the detail page using the platform specific route animation. Let’s change that up to a container transform animation.

OpenContainer(
    closedBuilder: (BuildContext _, VoidCallback openContainer) {
        return ArticleCard(
            article: article,
        );
    },
    openBuilder: (BuildContext _, CloseContainerActionCallback closeContainer) {
        return ArticlePage(
            article: article,
        );
    },
),
padding: const EdgeInsets.all(16),
const SizedBox(height: 16),
closedElevation: 4,
transitionType: ContainerTransitionType.fadeThrough,
...
tappable: false,
closedBuilder: (BuildContext _, VoidCallback openContainer) {
    return GestureDetector(
    onTap: () {
        openContainer();
        print("Container Opening...Do Something here...");
    },
    child: ArticleCard(article: article),
    );
},
onClosed: (result) {
    print("Container closed");
    print("We can reload the list of articles here");
    print(result);
},
leading: IconButton(
    onPressed: () {
        // Navigator.pop(context); // Default pop() implementation
        Navigator.pop(context, "Data from the Article Page");
    },
    icon: const Icon(Icons.arrow_back),
),