[Web][Channel beta] Unable to paint new Scrollbar #75643

Activity

1. Piinks commented on Feb 8, 2021

   

   Piinks

   on Feb 8, 2021

   Contributor

   More actions

   Copied reproduction code over from link for reference:

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         title: 'Scrollbar tests',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: Scaffold(
           body: Test1(),
         ),
       );
     }
   }
   
   class Test1 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return ScrollbarTheme(
         data: ScrollbarThemeData(
           thumbColor: MaterialStateColor.resolveWith((states) => Colors.red),
           trackBorderColor: MaterialStateColor.resolveWith((states) => Colors.green),
           trackColor: MaterialStateColor.resolveWith((states) => Colors.blue),
         ),
         child: Scrollbar(
           isAlwaysShown: true,
           showTrackOnHover: true,
           thickness: 12,
           radius: Radius.circular(8),
           child: ListView.builder(
               itemCount: 50,
               itemBuilder: (context, index) {
                 return ListTile(
                   title: Text(' - ${index+1} - '),
                   subtitle: Text('Scrollbar tests'),
                   tileColor: index % 2 == 0 ? Colors.white70: Colors.white10,
                 );
               }),
         ),
       );
     }
   }
   
   class Test2 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return CustomPaint(
         painter: ScrollbarPainter(
           color: Colors.red,
           trackBorderColor: Colors.green,
           trackColor: Colors.blue,
           fadeoutOpacityAnimation: const AlwaysStoppedAnimation<double>(1.0),
         ),
         child: Scrollbar(
           isAlwaysShown: true,
           showTrackOnHover: true,
           radius: Radius.circular(8),
           thickness: 12,
           child: ListView.builder(
               itemCount: 50,
               itemBuilder: (context, index) {
                 return ListTile(
                   title: Text(' - ${index+1} - '),
                   subtitle: Text('Scrollbar tests'),
                   tileColor: index % 2 == 0 ? Colors.white70: Colors.white10,
                 );
               }),
         ),
       );
     }
   }

   Hi @franarolas I can see what is going on here...

   Regarding Test1, the ScrollbarTheme cannot be within the same context of the Scrollbar. When the Scrollbar calls Theme.of(context) to inform the coloring, it does not find the one you intend it to find because it is built in the same context. This is similar to trying to call Scaffold.of(context) within the same context that the Scaffold is being built, it will not get the right one.

   You can fix this by adding a Builder in between to get a new context, like this:

   ...
   Widget build(BuildContext context) {
       return Theme(
         data: ThemeData(
           scrollbarTheme: ScrollbarThemeData(
             thumbColor: MaterialStateColor.resolveWith((states) => Colors.red),
             trackBorderColor: MaterialStateColor.resolveWith((states) => Colors.green),
             trackColor: MaterialStateColor.resolveWith((states) => Colors.blue),
           ),
         ),
         child: Builder(
           builder: (context) => Scrollbar(...

   Or, you can just provide the ScrollbarThemeData to the ThemeData you are already creating above in your MaterialApp:

   MaterialApp...
     theme: ThemeData(
       primarySwatch: Colors.blue,
       scrollbarTheme: ScrollbarThemeData(
         thumbColor: MaterialStateColor.resolveWith((states) => Colors.red),
         trackBorderColor: MaterialStateColor.resolveWith((states) => Colors.green),
         trackColor: MaterialStateColor.resolveWith((states) => Colors.blue),
       ),
     ),

   As for Test2, I do not expect this to work. The Scrollbar creates and uses its own painter, so wrapping a Scrollbar in a ScrollbarPainter won't affect the Scrollbar.
2. Piinks

   added

   d: stackoverflowGood question for Stack OverflowGood question for Stack Overflow

   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.

   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 8, 2021
3. franarolas commented on Feb 8, 2021

   

   franarolas

   on Feb 8, 2021

   Author

   More actions

   @Piinks

   Regarding Test1, the ScrollbarTheme cannot be within the same context of the Scrollbar. When the Scrollbar calls Theme.of(context) to inform the coloring, it does not find the one you intend it to find because it is built in the same context. This is similar to trying to call Scaffold.of(context) within the same context that the Scaffold is being built, it will not get the right one.

   Oh, I see my mistake there, I haven't had this in mind, I'm sorry you are completely right, thank you, putting the scrollbartheme in the material theme works as expected.

   As for Test2, I do not expect this to work. The Scrollbar creates and uses its own painter, so wrapping a Scrollbar in a ScrollbarPainter won't affect the Scrollbar.

   If this is the expected behaviour, I will just close the issue.

   Thank you again.

   👍React with 👍1Reacted by Kate Lovett
4. franarolas

   closed this as completedon Feb 8, 2021
5. no-response

   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 8, 2021
6. sedagurocak commented on Jun 16, 2021

   

   sedagurocak

   on Jun 16, 2021

   More actions

   I have this problem on app. The track color is not change when I use ScrollBartheme. How can I change track color on mobile app.

   data: ScrollbarThemeData(
   thumbColor: MaterialStateColor.resolveWith((states) => Colors.red),
   trackBorderColor: MaterialStateColor.resolveWith((states) => Colors.green),
   trackColor: MaterialStateColor.resolveWith((states) => Colors.blue),
   ),

   I need to do this;
   
7. github-actions commented on Jul 31, 2021

   

   github-actionsbot

   on Jul 31, 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.
8. github-actions

   locked as resolved and limited conversation to collaborators on Jul 31, 2021