Flutter Community
Published in

Flutter Community

Synchronising widget animations with the scroll of a PageView in Flutter

Source: https://wallpapersafari.com/w/U6wfT1#

What are we talking about?

Roadmap

  1. Create a NotifyingPageView widget, which wraps a PageView and notifies the changes to the provided ValueNotifier .
  2. Create a screen with a ValueNotifier<double> to pass to the NotifyingPageView in order to get updates about the scroll status.
  3. Complete the rest of the screen with the NotifyingPageView and our widget to transform.
  4. Launch the app and see our work in action! 🚀

Creating the NotifyingPageView

Creating the screen and the ValueNotifier

Building the page with NotifyingPageView and the transforming widget

  1. The NotifyingPageView , which is supplied with the notifier.
  2. An AnimatedBuilder tuned to the _notifier, which builds its child by rotating it by 2* pi * _notifier.value .

See everything in action

Considerations

Conclusions

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Antonello Galipò

Flutter and Android developer with an enormous love for Yoga and hipster habits.