Smooth paging animation using Provider in PageController in Flutter

Flutter, A cross platform mobile application development platform is currently trending in world wide market in mobile apps.

What is PageController ?

There are lots of widgets in Flutter but in which most common is pagecontroller. A page controller lets you manipulate which page is visible in a PageView. It consists of different pageviews in it.

What is Provider ?

Provider is a Flutter architecture that provides the current data model to the place where we currently need it. It contains some data and notifies observers when a change occurs.

In Flutter SDK, this type is called a ChangeNotifier. For the object of type ChangeNotifier to be available to other widgets, we need ChangeNotifierProvider.

It provides observed objects for all of its descendants. The object which is able to receive current data is Consumer, which has a ChangeNotifier instance in the parameter of its build function that can be used to feed subsequent views with data.

So in this demo we will talk about animating between pages of pagecontroller using custom buttons. Here what we are going to achieve using custom buttons.

Account page with Linked and Delinked accounts

So in above screenshot “Linked account” and “Delinked account” are custom button created and based on those button click we change page of page controller.

So here is the common PageController code :

Account.dart

Here in above Gist file you can see that on button click we need to set state of page and reload whole widget.

What if we don’t need to do that ? We can change page of pagecontroller without using setState

So here Provider comes in Picture. We will create class with ChangeNotifier of Provider.

Here is the class of Provider :

Provider with ChangeNotifier

So in this provider file, We create a private variable _currentPage and create getter-setter of this variable.

At the end of setter you notice notifyListeners() is there, So whenever value of that variable update, it will notify widget that this value is updated and it will update that widget too.

but there is a catch here, You need to register your provider class into main.dart file otherwise it will throw error. You can register as many providers as you want.

ChangeNotifierProvider(create: (_) => PageNotifier())

Main.dart

By registering this provider, you are now ready to use it anywhere in current implementation. To getting notified by NotifyListener, you need to use Consumer to be embedded in particular widget tree as follows :

Consumer<PageNotifier>( builder: (context, provider, snapshot) { return child; } );

Account.dart

So it will notify, when you change value of _currentPage and it will automatically update the current index of pagecontroller. Remember you need to change index of PageController when you change value of _currentPage as follow :

Account.dart

So, Provider is one of the best pattern to achieve state management in flutter. There are different type of Provider Notifiers, you can find those in provider pacakge https://pub.dev/packages/provider.

Here is the full demo :
https://www.dropbox.com/s/c4nsrozym1vuqq5/demo_provider.zip?dl=0

Thank you.