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.0, updated: 2024-02-26

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 udpates
  • 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

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:

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

Questions? Let's chat