Skip to content

The network

Add your feed Account Follow @itsallwidgets on X (opens in a new tab)
Videos
Video

Flutter Animations: Interactive Page Flip Widget [Part 2]

by Andrea Bizzotto youtube.com

14 min 5.2k views

Watch on YouTube

Part 2 on how to build an interactive page flip widget using Flutter's AnimationController, AnimationBuilder, gesture detectors and custom 3D matrix transforms. Written tutorial: https://codewithandrea.com/videos/flutter-animations-page-flip-widget-part2/ Starter project: https://codewithandrea.com/videos/flutter-animations-page-flip-widget-part2/images/page_flip_flutter_tutorial_part2.zip page_flip_builder source on GitHub: https://github.com/bizz84/page_flip_builder page_flip_builder package on pub.dev: https://pub.dev/packages/page_flip_builder CONTENTS 00:00 - Intro 00:43 - Making the page flip transition interactive with GestureDetector 02:47 - Extending the animation range to [-1, 1] 05:43 - Fine-tuning the AnimationController transitions 07:39 - Completing the animation on drag end 12:36 - Wrap Up Join my FREE email course to become a Flutter expert with the best resources, at your own pace: https://codewithandrea.com/newsletter/ Sign up for my upcoming Flutter Animations course: 👇👇 https://codewithandrea.com/courses/flutter-animations-masterclass/ Happy coding!

Made by

Andrea Bizzotto @andreabizzotto 🇬🇧 United Kingdom

Available for hire

Andrea Bizzotto has extensive experience in mobile app development, having built complex apps for various clients and as an independent developer. He is passion...

View Andrea on Flutter Pro
Forum

Questions about this, or something to add?

Discuss on the forum

Topics Animations

It's All Widgets

Apps by Andrea Bizzotto

  • Flight CO2 Calculator screenshot

    Flight CO2 Calculator

    Simple app to calculate the CO2 emissions from your flights.

    Open source

More like this

Report this · Wrote this? Claim it

Supported by