简体   繁体   中英

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM