I make a small app to display list of images to user I get those images from api and with those list of images I try to use smooth_page_indicator 1.0.0 2Package from flutter with image list but I find error as:

Unsupported operation: Infinity or NaN toInt 

Full code:

class _WidgetImageState extends State<WidgetImage> {
  List<ImageTopicModel> _ListData = [];
  List<ImageTopicModel> _ListDataDisplay = [];
  @override
  void initState() {
    Api().then((value) {
      if (this.mounted) {
        setState(() {
          _ListData.addAll(value);
          _ListDataDisplay = _ListData;
        });
      }
    });
    super.initState();
  }
  
  PageController _pageController = PageController();
  int page = 0;
  void onPageViewChange(int _page) {
    page = _page;
    //  setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return  Container(
      width: double.infinity,
      height: 400,
      child: Stack(children: <Widget>[
        Stack(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 400,
              child: PageView.builder(
                  physics: BouncingScrollPhysics(),
                  controller: _pageController,
                  onPageChanged: onPageViewChange,
                  itemCount: _ListDataDisplay.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      child: Column(children: <Widget>[
                        InkWell(
                            child: CachedNetworkImage(
                              imageUrl:
                              "${_ListDataDisplay[index].image}",
                              width: double.infinity,
                              height: 400,
                              fit: BoxFit.cover,
                              errorWidget:
                                  (context, url, error) =>
                                  Icon(Icons.error),
                            ),
                            onTap: () {
                              Navigator.push(context,
                                  MaterialPageRoute(
                                      builder: (context) {
                                        return ShowImageOfAd(
                                            "${_ListDataDisplay[index].image}");
                                      }));
                            }),
                      ]),
                    );
                  }),
            ),
            Container(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: 40,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Colors.black.withOpacity(0.0),
                              Colors.black.withOpacity(0.5)
                            ])),
                    child: Align(
                      alignment: Alignment.center,
                      child: SmoothPageIndicator(

                          controller: _pageController, // PageController
                          count: _ListDataDisplay.length,
                          axisDirection: Axis.horizontal,
                          effect: WormEffect(
                            dotWidth: 9.0,
                            dotHeight: 9.0,
                            dotColor: Colors.black26,
                            activeDotColor: Colors.white,
                          ),
                          onDotClicked: (index) {}),
                    ),
                  ),
                )),
          ],
        ),
      ]),
    );
  }
}

I try to find solution to a long time but I can't find any solution to it. How I can solve this problem? any ideas to solve that?

======== Exception caught by rendering library =====================================================
The following UnsupportedError was thrown during paint():
Unsupported operation: Infinity or NaN toInt

The relevant error-causing widget was: 
  SmoothPageIndicator SmoothPageIndicator:file:///C:/Users/**********/widgetImage.dart:96:30
When the exception was thrown, this was the stack: 
#0      double.toInt (dart:core-patch/double.dart)
#1      WormPainter.paint (package:smooth_page_indicator/src/painters/worm_painter.dart:21:40)
#2      RenderCustomPaint._paintWithPainter (package:flutter/src/rendering/custom_paint.dart:571:13)
#3      RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:613:7)
#4      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
#5      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
#6      RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
#7      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)

CodePudding user response：

This happens because you have an async operation in initState and flutter try to draw all your widget tree but for WormIndicator there are 0 items. To handle this correctly render some placeholder while the data is loading.

For example, you can add the condition before showing it right in the build method of _WidgetImageState:

  ... code above ...
  @override
  Widget build(BuildContext context) {
    return _ListData.isEmpty
        ? SizedBox.shrink()
        : Container(
            width: 500,
            height: 400,
            child: Stack(children: <Widget>[
   ... code below ...