Below is the class where i have implemented the feature where HTML file will be rendered from the url passed from the previous page. With the click of the floating action button, i want to auto scroll the text of the html. I have tried using singleChildScrollView, Expanded, column but none of the options work for me, Instead I am unable to get the content of the file too and i receive the following error: RenderCustomPaint object was given an infinite size during layout.

class ScrollPage extends StatefulWidget {
      late final  String? url;
      ScrollPage({Key? key,this.url}) : super(key: key);
    
      @override
      _ScrollPageState createState() => _ScrollPageState(url);
    }
    
    class _ScrollPageState extends State<ScrollPage> with TickerProviderStateMixin {
    
      late final String? url;
      _ScrollPageState(url);
    
      ScrollController _scrollController = ScrollController();
      bool scroll = false;
      int speedFactor = 20;
    
      _scroll() {
        double maxExtent = _scrollController.position.maxScrollExtent;
        double distanceDifference = maxExtent - _scrollController.offset;
        double durationDouble = distanceDifference / speedFactor;
    
        _scrollController.animateTo(_scrollController.position.maxScrollExtent,
            duration: Duration(seconds: durationDouble.toInt()),
            curve: Curves.linear);
      }
    
      _toggleScrolling() {
        setState(() {
          scroll = !scroll;
        });
    
        if (scroll) {
          _scroll();
        } else {
          _scrollController.animateTo(_scrollController.offset,
              duration: Duration(seconds: 1), curve: Curves.linear);
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return    Scaffold(
    
             body: SingleChildScrollView(
             child: NotificationListener(
            onNotification: (notif) {
              if (notif is ScrollEndNotification && scroll) {
                Timer(Duration(seconds: 1), () {
                  _scroll();
                });
              }
    
              return true;
            },
    
            child: SingleChildScrollView(
              controller: _scrollController,
              child:    WebViewPlus (
    
                initialUrl: widget.url,
    
              ),
            ),
          )),
          floatingActionButton:
          FloatingActionButton(onPressed: () {
            _toggleScrolling();
          }), // This trailing comma makes auto-formatting nicer for build methods.
    
    
        );
      }
    }

CodePudding user response：

You have a nested SingleChildScrollView. Remove the inner single child scroll view and add the controller to the first one

@override
      Widget build(BuildContext context) {
        return    Scaffold(
    
             body: SingleChildScrollView(
               controller: _scrollController, 
             child: NotificationListener(
            onNotification: (notif) {
              if (notif is ScrollEndNotification && scroll) {
                Timer(Duration(seconds: 1), () {
                  _scroll();
                });
              }
    
              return true;
            },
              
              child:    WebViewPlus (
                initialUrl: widget.url,
              ),
          )),
          floatingActionButton:
          FloatingActionButton(onPressed: () {
            _toggleScrolling();
          }), // This trailing comma makes auto-formatting nicer for build methods.
    
    
        );

CodePudding user response：

I think so this will work fine now only remove second SingleChildScrollView from your code this is code example help you..

Scaffold(
      body: SingleChildScrollView(
          child: NotificationListener(
        onNotification: (notif) {
          if (notif is ScrollEndNotification && scroll) {
            Timer(Duration(seconds: 1), () {
              _scroll();
            });
          }

          return true;
        },
        child: WebViewPlus(
          initialUrl: widget.url,
        ),
      )),
      floatingActionButton: FloatingActionButton(onPressed: () {
        _toggleScrolling();
      }),
    )