Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Flutter Cookbook, Second Edition - Second Edition

You're reading from  Flutter Cookbook, Second Edition - Second Edition

Product type Book
Published in May 2023
Publisher Packt
ISBN-13 9781803245430
Pages 712 pages
Edition 2nd Edition
Languages
Author (1):
Simone Alessandria Simone Alessandria
Profile icon Simone Alessandria

Table of Contents (19) Chapters

Preface 1. Getting Started with Flutter 2. Creating Your First Flutter App 3. Dart: A Language You Already Know 4. Introduction to Widgets 5. Mastering Layout and Taming the Widget Tree 6. Adding Interactivity and Navigation to Your App 7. Basic State Management 8. The Future is Now: Introduction to Asynchronous Programming 9. Data Persistence and Communicating with the Internet 10. Advanced State Management with Streams 11. Using Flutter Packages 12. Adding Animations to Your App 13. Using Firebase 14. Firebase Machine Learning 15. Flutter Web and Desktop 16. Distributing Your Mobile App 17. Other Books You May Enjoy
18. Index

Using Hero animations

In Flutter, a Hero is an animation that makes a widget “fly” from one screen to another. During the flight, the Hero may change position, size, and shape. The Flutter framework deals with the transition automatically.

In this recipe, you will see how to implement a Hero transition in your apps, from an icon in a ListTile to a bigger icon on a detail screen, as shown in the following screenshots. The first screen contains a List:

Graphical user interface, application  Description automatically generated

Figure 12.4: A List in a Hero animation

When the user clicks on one of the items in the List, the second screen appears with an animation:

A picture containing graphical user interface  Description automatically generated

Figure 12.5: Detail screen after the Hero animation

Getting ready

To follow along with this recipe, you need any existing Flutter project already created, or you can use the app created in any of the previous recipes.

How to do it...

In this recipe, you will create a Hero animation by transforming an icon, and changing its position and size...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime}