fadingpageview 1.0.0 fadingpageview: ^1.0.0 copied to clipboard
A widget similar to PageView that makes the transition between pages by fading out the current one and fading in the next one
FadingPageView #
This package provides a widget similar to PageView that makes the transition between pages by fading out the current one and fading in the next one.
Features #
The animation shows an example of walking from one page to the next one.
Some features are:
- control the page to show, go to next, go to previous, etc. from the parent widget (by using the
FadingPageViewController
). - enable an
onShown
callback, called whenever the current page has faded in completely. - control whether to disable or not the pointer while fading.
- custom fade-in and fade-out duration.
Getting started #
To start using this package, add it to your pubspec.yaml
file:
dependencies:
linear_timer:
Then get the dependencies (e.g. flutter pub get
) and import them into your application:
import 'package:fadingpageview/fadingpageview.dart';
Usage #
In the most simple case, use the widget in your application:
class _FadingPageViewDemoState extends State<FadingPageViewDemo> {
FadingPageViewController pageController = FadingPageViewController();
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton:
FloatingActionButton(
onPressed: () {
pageController.next();
},
child: const Icon(Icons.navigate_next),
),
body: FadingPageView(
controller: pageController,
disableWhileAnimating: true,
itemBuilder: (context, itemIndex) {
return Center(
child: Text("This is the content for page: $itemIndex")
);
}
)
);
}
}
Have in mind that the controller FadingPageViewController
is mandatory because the only way to control when to change the page is by using this controller.
Additional information #
FadingPageView #
The constructor for the widget is the next:
FadingPageView(
{required this.itemBuilder,
required this.controller,
this.onShown,
this.fadeInDuration = const Duration(milliseconds: 300),
this.fadeOutDuration = const Duration(milliseconds: 300),
this.disableWhileAnimating = false,
super.key});
The basic information is:
- itemBuilder: is the generator for the content for each page. Is a function that is used to build the page Widget Function(BuildContext context, int itemIndex)
- controller: is the controller of the pages being shown. It is mandatory to include this controller, because is the only mechanism to change from one page to another.
- fadeInDuration and fadeOutDuration: are duration of the transitions.
- disableWhileAnimating: if set to
true
, the content is disabled while it is being faded in or out. - onShown: is a callback, called whenever the page is visible after being faded in.
FadingPageViewController #
This is the controller used to define the number of pages, the current page, etc.
The constructor is the next:
FadingPageViewController([int startingPage = 0, int? pageCount])
, and initializes the values for the startingPage
that is shown in first place, and the pageCount
that will be considered; if set to 0, it means infinite pages.
Then it exports the following attributes:
- currentPage: used to get the current page and to go to a page (it means that the viewer will fade-out the current page and will fade-in the new one).
- isAnimating: returns whether the page view is being faded in or out at this moment.
- pageCount: used to get the total number of pages considered, and to set the number of possible pages.
- isAtEnd: Gets whether it is at the end or not
- isAtBeginning: Gets whether it is at the beginning or not.
- hasMorePages: Gets whether there are more pages or not.
It also exports the next two methods:
- next(): transitions to the next page (if there are more pages). If the controller is at the last page, it does nothing.
- previous(): transitions to the previous page (if there are more pages). If the controller is at the first page, it does nothing.