Home > Blockchain >  How to count the number of banners/pages for dot indicators? I'm using smooth_page_indicator pa
How to count the number of banners/pages for dot indicators? I'm using smooth_page_indicator pa

Time:05-16

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),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response:

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

  • Related