docs: animatedTabBuilder

README.md

@@ -30,6 +30,7 @@ NOTE: This package is a continuation of [persistent_bottom_nav_bar](https://pub.
 - [Styling](#styling)
 - [Using a custom Navigation Bar](#using-a-custom-navigation-bar)
 - [Controlling the Navigation Bar programmatically](#controlling-the-navigation-bar-programmatically)
+- [Custom transition animation when switching pages](#custom-transition-animation-when-switching-pages)
 - [Navigation](#navigation)
   - [Router API](#router-api)
 - [Useful Tips](#useful-tips)
@@ -253,6 +254,24 @@ _controller.jumpToPreviousTab();
 
 ```
 
+## Custom transition animation when switching pages
+
+When switching from one tab to another, the default behavior is a slide transition that slides the current page to the left or right and reveals the taget page by sliding it into the screen. You can customize this behavior by building your own animation, e.g. by fading out the current page and fading in the new one. To control the animation, you can pass a function to `PersistentTabView.animatedTabBuilder`. This function is a builder that builds the old page and the new page at the same time. That is why it gets the BuildContext as an argument, the index of the currently built tab, the progress of the animation, the new index, the old index and the actual page content as a child.
+
+This is what the default animation builder looks like:
+
+```dart
+ final double yOffset = newIndex > index
+     ? -animationValue
+     : (newIndex < index
+         ? animationValue
+         : (index < oldIndex ? animationValue - 1 : 1 - animationValue));
+ return FractionalTranslation(
+   translation: Offset(yOffset, 0),
+   child: child,
+ );
+```
+
 ## Navigation
 
 Each of your Tabs will get its own Navigator, so they dont interfere with eachother. That means there will now be a difference between calling `Navigator.of(context).push()` (which will push a new screen inside the current tab) and `Navigator.of(context, rootNavigator: true).push()` (which will push a new screen above the whole `PersistentTabView`, ultimately hiding your navigation bar).