How to set Scrollbar colour in flutter?

Question

I have a normal ListView which is wrapped by the Scrollbar class to produce a scrollbar when scrolling down. But I want to change the Scrollbar color to white since I have a dark background.

After exploring the Scrollbar class I can see that it uses the theme highlightColor as shown inside scrollbar.dart.

_themeColor = theme.highlightColor.withOpacity(1.0);

Tried wrapping the Scrollbar in a Theme but still no luck.

Below is my code -

Theme(
  data: ThemeData(
    highlightColor: Colors.white, //Does not work
  ),
  child: Scrollbar(
    child: ListView(
      //Normal ListView code
    ),
  ),
)

Any help is appreciated. Thanks in advance.

Figurant

github.com/flutter/flutter/blob/master/packages/flutter/lib/src/… – Sidoney

As mentioned in my question, I did check this file already. I need a way to change the scrollbar fill color. – Figurant

it should already adjust to a grayish-white itself when your background is dark – Neumark

This solution is working for me. However, I used copyWith as ` Theme(data: Theme.of(context).copyWith(highlightColor: Colors.white), ...)` – Amandine

Answer 1

You can use RawScrollbar instead and set the thumbColor to whatever color you like.

child: RawScrollbar(
  thumbColor: Colors.redAccent,
  radius: Radius.circular(20),
  thickness: 5,
  child: // scrollable widget
)

Armandinaarmando

for newbies (me), answer above also works with child: Scrollbar( ... ) – Selfabasement

No, because Scrollbar widget does not have thumbColor property – Incorporator

Answer 2

I changed it like this.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(
        scrollbarTheme: ScrollbarThemeData().copyWith(
          thumbColor: MaterialStateProperty.all(Colors.grey[500]),
        )
      ),
    );
  }
}

Fenny

Do you know if this has an impact on performance? – Jauregui

Answer 3

Scroll bar uses the highlight color.. so just add ur desired scrollbar color in the highlightColor inside Theme in MaterialApp and you are done.

MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        //main color
        primaryColor: const Color(0xffFFC600),
        //main font
        fontFamily: 'Roboto-Medium',
        //swatch stretching
        primarySwatch: goldenThemeColor,
        visualDensity: VisualDensity.adaptivePlatformDensity,

        splashColor:  const Color(0xffFFC600),

        //color for scrollbar
        highlightColor: Color(0xffffc600)

      ),

      routes: {
        '/' : (context) => SplashScreen(),
        ...
      }
      initialRoute: '/',
    )

Sura

What if you are using Scrollbar in a CupertinoApp? – Whisky

It's more safe to add scrollbarTheme to your ThemeData class. Inside that class just override thumbColor. – Lylelyles

Answer 4

Flutter now provides scrollbarTheme you can use it to set global scroll bar theme and change the thumbColor property as shown below

ScrollbarThemeData(
  interactive: true,
  isAlwaysShown: true,
  radius: const Radius.circular(10.0),
  thumbColor: MaterialStateProperty.all(
    DarkAppColors.primaryTextColor.withOpacity(0.4),
  ),
  thickness: MaterialStateProperty.all(5.0),
  minThumbLength: 100,
)

Limiter

somehow my iOS simulator crash after adding this code, Lost Connection, only on iOS Simulator – Stupor

Tks bro! If do like this way, we can more config both trackColor or trackColorBorder :D – Nijinsky

can you complete code for edxample where is need to put the code ScrollbarThemeData more clear please . – Cockaigne

Answer 5

you could clone the file you linked and change the color inside your project, and then instead of using Scrollbar() use, for example, MyScrollBar(), the edited file you cloned

Rettarettig

That won't be an optimal solution, since I would end up adding large amounts of code just to change a few lines. I wanted to know if there is way to directly set the color of the Scrollbar. – Figurant

Answer 6

I personally prefer not to manually set a color to the scrollbar, as it doesn't behave the same way as the default one unless you set the colors for every material state. A solution that worked perfectly for me was to wrap the ListView in a Theme widget and set the colorScheme to one with a Brightness.dark brightness.

Theme(
  data: ThemeData(colorScheme: const ColorScheme.dark()),
  child: ListView(...),
)

Quadragesimal

Answer 7

I fix this problem like this: Just use ScrollbarTheme, and u can change thumbColor

Xyster

Please edit your post to add code and data as text (using code formatting), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and many more reasons. Images should only be used, in addition to text in code format, if having the image adds something significant that is not conveyed by just the text code/error/data. See minimal reproducible example on what code is required. – Yeta

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Chesterfield