The app crashes while trying to drag the Scrollbar when used along with SliverList #74404

Activity

1. LefebvreIlyas commented on Jan 21, 2021

   

   LefebvreIlyas

   on Jan 21, 2021

   Last edited by LefebvreIlyas

   More actions

   Hello @ganeshrvel the problem is probably in the following lines:

   if (index >= itemLength) {
       return null;
   }

   You must never return null for a widget!

   Try this code please:

   const itemLength = 300;
   
   Scrollbar(
       controller: _scrollController,
       child: CustomScrollView(
           controller: _scrollController,
           physics: const ScrollPhysics(),
           slivers: <Widget>[
               SliverList(
                   delegate: SliverChildBuilderDelegate(
                       (BuildContext context, int index) {
                           return Container( width: 20);
                       },
                       childCount: itemLength,
                   ),
               ),
           ],
       ),
   );
2. ganeshrvel commented on Jan 21, 2021

   

   ganeshrvel

   on Jan 21, 2021

   Author

   More actions

   You must never return null for a widget!

   But returning null is allowed for creating infinite list in SliverList. itemLength won't be always available in such cases
3. LefebvreIlyas commented on Jan 21, 2021

   

   LefebvreIlyas

   on Jan 21, 2021

   Last edited by LefebvreIlyas

   More actions

   You must never return null for a widget!

   But returning null is allowed for creating infinite list in SliverList. itemLength won't be always available in such cases

   Yes, you are right! 🤦‍♂️

   From the doc of SliverChildBuilderDelegate.builder

   Should return null if asked to build a widget with a greater index than exists.
4. LefebvreIlyas commented on Jan 21, 2021

   

   LefebvreIlyas

   on Jan 21, 2021

   Last edited by LefebvreIlyas

   More actions

   If it's an infinite list what should the scrollbar look like ?
5. HansMuller

   added

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   f: scrollingViewports, list views, slivers, etc.Viewports, list views, slivers, etc.

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   on Jan 21, 2021
6. HansMuller commented on Jan 21, 2021

   

   HansMuller

   on Jan 21, 2021

   Contributor

   More actions

   CC @Piinks
7. Piinks

   added

   c: crashStack traces logged to the consoleStack traces logged to the console

   on Jan 21, 2021
8. Piinks commented on Jan 21, 2021

   

   Piinks

   on Jan 21, 2021

   Contributor

   More actions

   Scrollbar does not currently support infinite scroll views. You can follow #41434 for that feature.
   Because of that, the Scrollbar should not show up if the scroll view has an infinite length, so I am curious why it is showing in your sample.
9. Piinks commented on Jan 21, 2021

   

   Piinks

   on Jan 21, 2021

   Contributor

   More actions

   I think this is working as intended, since the Scrollbar is not intended to work this way currently. I was able to reproduce with this sample:

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     final itemLength = 300;
     final _scrollController = ScrollController();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Scrollbar(
           controller: _scrollController,
           child: CustomScrollView(
             controller: _scrollController,
             physics: const ScrollPhysics(),
             slivers: <Widget>[
               SliverList(
                 delegate:
                     SliverChildBuilderDelegate((BuildContext context, int index) {
                   if (index >= itemLength) {
                     return null;
                   }
                   return Container(height: 20, child: Text('Index $index'));
                 }),
               ),
             ],
           ),
         ),
       );
     }
   }

   The reason why the Scrollbar does not show until you reach the bottom is because the SliverChildBuilderDelegate does not have childCount set. So while you are scrolling down the list, the maxScrollExtent is infinity, therefore no Scrollbar is painted.

   When you reach the end of the list and the delegate returns null, then the maxScrollExtent is known and no longer infinite. That is why the Scrollbar shows up, it now has a length it can work with to calculate the right positioning, which is at the end of the list.

   When you try to drag on it at this point, scrolling back up the list, the maxScrollExtent goes to infinity again since we're no longer at the end of the list. This is what causes the crash, since you are now attempting to drag on a Scrollbar that is given infinite space to position itself in.

   I would recommend following #41434 for when we add support for infinitely scrollable scrollbars. If there is another aspect of this that is not covered by that issue, let us know and we will look into it. :) Thanks!
10. Piinks

    added

    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

    on Jan 21, 2021
11. ganeshrvel commented on Jan 21, 2021

    

    ganeshrvel

    on Jan 21, 2021

    Author

    More actions

    @Piinks Wonderfully explained! I will close this issue for now. Thanks! :)
12. ganeshrvel

    closed this as completedon Jan 21, 2021
13. pedromassangocode

    removed

    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

    on Feb 5, 2021
14. github-actions commented on Aug 6, 2021

    

    github-actionsbot

    on Aug 6, 2021

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
15. github-actions

    locked as resolved and limited conversation to collaborators on Aug 6, 2021