Challenge

For this advanced challenge, create this interactive page flip widget (you can drag left/right to flip the page):

Open preview in a separate page

Starter Project

You can grab the starter project for this challenge here:

c003_page_flip_starter.zip
v0.1.1, updated: 2024-05-17

Check the README for how to use it.

Prerequisites

• Intermediate knowledge of explicit animations in Flutter
• Familiarity with 3D matrix transforms

Primary Goals

Create a non-interactive page flip widget:

• Create a custom PageFlipBuilder stateful widget
• Use AnimationController and AnimatedBuilder to control the flip transition (hook this up to the onFlip callback)
• Use a Transform widget to bind the animation value to the rotation angle
• Add a tilt value to make the transition look 3D

Stretch Goals

Make the page flip interactive:

• Use a GestureDetector to detect horizontal drag updates
• Update the AnimationController’s range to [-1, 1]
• Add a “fling” effect so the animation continues and decelerates when the pointer is released
• Make your code robust and ensure all edge cases are handled

What You Will Learn

• Advanced usage of AnimationController (forward, reverse, fling)
• Advanced usage of matrix transforms to control the rotation angle and tilt values
• Advanced use of gesture detectors to handle drag updates
• Calling a child widget method from a parent widget using Keys

Useful Links and Resources

This is an advanced challenge, and some 3D matrix transforms will be required.

Completing the challenge in its entirety is likely to take 10+ hours.

If you need guidance, follow these tutorials:

• Flutter Animations: Interactive Page Flip Widget
• Flutter Animations: Interactive Page Flip Widget [Part 2]

You’ll also need to know how to work with keys:

• When to Use Keys - Flutter Widgets 101 Ep. 4