CODEWITHSUNDEEP
androiddartflutterflutter-layout
bytesizedwizard
bytesizedwizard

Reputation: 6033

How to set Scrollbar colour in flutter?

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.

Upvotes: 54

Views: 42772

Answers (6)

Fernando Herrera
Fernando Herrera

Reputation: 679

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]),
        )
      ),
    );
  }
}

Upvotes: 30

MTs
MTs

Reputation: 1016

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
)

Upvotes: 100

Kartik Malhotra
Kartik Malhotra

Reputation: 257

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,
)

Upvotes: 14

Sujit
Sujit

Reputation: 1792

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(...),
)

Upvotes: 0

user13833754
user13833754

Reputation:

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: '/',
    )

Upvotes: 19

Mário Garcia
Mário Garcia

Reputation: 575

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

Upvotes: 0

Related Questions