faabul_page_indicator

Description:

faabul page indicator

faabul_page_indicator #

faabul_page_indicator is developed and used by Faabul Live Quizzes
Another dot indicator? #
We have created this package since there was no existing package that would satisfy the following requirements:

Support for custom "dot" builder
Good UX for a use case when there are too many pages and a constrained space for the indicator
Support for both LTR and RTL locales
Good performance

Usage #
See example for a complete example.
Just pass the widget an existing controller and the number of pages that you have. This will display
the default dot indicator:
late final _controller = PageController();

@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: PageView.builder(
itemCount: 20,
itemBuilder: _buildPage,
controller: _controller,
),
),
FaabulPageIndicator(
itemCount: 20,
controller: _controller,
),
],
);
}
copied to clipboard
The indicator automatically handles overflow if there are too many dots to display and onTap navigation between the pages.
If you need different styling or functionality, you can pass a custom builder. You can either use the default FaabulPageIndicatorDot or pass any widget you like.
FaabulPageIndicator(
itemCount: 20,
itemSize: Size(30, 30),
controller: _controller,
itemBuilder: (BuildContext context, int index, int? currentPage) =>
FaabulPageIndicatorDot(
key: ValueKey(index),
size: 30,
decoration: index == currentPage
? BoxDecoration(
border: Border.all(
color: colorScheme.primary, width: 2),
borderRadius: BorderRadius.circular(8),
color: colorScheme.primaryContainer,
)
: BoxDecoration(
border: Border.all(
color: colorScheme.outlineVariant,
width: 2),
borderRadius: BorderRadius.circular(4),
),
isActive: index == currentPage,
onTap: () => _controller.jumpToPage(index),
),
)
copied to clipboard

You can also pass any widget, making each "dot" unique:

When using custom builders, make sure the rendered dot's size corresponds to the itemSize property.
Performance #
FaabulPageIndicator is optimized for performance. It uses a ListView.builder internally to display the dots. This means that only the visible dots are rendered and the indicator can handle a large number of pages without any performance degradation. Internally the indicator only does work when the actual page (as integer) is changed in the PageController.
See it live #
You can see the indicator in action in the Faabul Live Quizzes app every time you play a quiz.