'How to count the number of banners/pages for dot indicators? I'm using smooth_page_indicator package available on pub.dev
I have to return the number of pages in the PageView so that the value of 'count' in DotsAnimatedWidget->AnimatedSmoothIndicator automatically updates if the number of banners are increased or decreased. Is there any way to count the number of pages in the PageView or count the number of children? Should I approach a different way? Link for the package used: https://pub.dev/packages/smooth_page_indicator
class _BannerWidgetState extends State<BannerWidget> {
int _pages = 0;
final _controller = PageController();
@override
Widget build(BuildContext context) {
return Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
height: 140,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: PageView(
controller: _controller,
onPageChanged: ((val) {
setState(() {
_pages = val.toInt();
});
}),
children: const [
Center(
child: Text(
'Banner 1',
style: TextStyle(fontSize: 20),
),
),
Center(
child: Text(
'Banner 2',
style: TextStyle(fontSize: 20),
),
),
Center(
child: Text(
'Banner 3',
style: TextStyle(fontSize: 20),
),
),
],
),
),
),
),
DotsIndicatorWidget(pages: _pages),
],
);
}
}
class DotsIndicatorWidget extends StatelessWidget {
const DotsIndicatorWidget({
Key? key,
required int pages,
}) : _pages = pages,
super(key: key);
final int _pages;
@override
Widget build(BuildContext context) {
return Positioned.fill(
bottom: 18,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
//mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSmoothIndicator(
activeIndex: _pages,
count: 3,
effect: const WormEffect(
spacing: 4.0,
activeDotColor: Colors.green,
dotColor: Colors.grey,
dotHeight: 8.0,
dotWidth: 8.0,
radius: 3,
type: WormType.normal),
),
],
),
),
);
}
}
Solution 1:[1]
Create a variable for children of PageView
List<Widget> _pages = [some Container]
int _currentIndex = 0;
And update it on onPageChanged()
onPageChanged: ((page) {
setState(() {
_currentIndex = page.toInt();
});
}),
Count the number of pages in the PageView used: _pages.length
But I think, used package smooth_page_indicator is best way
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Saitoh Akira |
