Change color of cupertino scrollbar in flutter

Viewed 1189

I need to change color of cupertino scrollbar, but I can't do that via normal constructor. Is there any way to make scrollbar white?

    CupertinoScrollbar(
              thickness: 5,
              controller: scrollController,
              thicknessWhileDragging: 8,
              //color not exist
    )
1 Answers

The CupertinoScrollBar is hardcoded so on iOS you can't change the color, but you can use highlightColor for the ThemeData. The Color will then displayed on Android only.

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)

      ),
import 'package:flutter/material.dart';

class LandingPage extends StatefulWidget {
  LandingPage({Key key}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return _LandingPageState();
  }
}

class _LandingPageState extends State<LandingPage> {
  ScrollController _controller;
  double _offset = 0;

  @override
  void initState() {
    _controller = ScrollController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Container(
            child: SingleChildScrollView(
              controller: _controller,
              child: Column(
                children: [
                  Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.black,
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.red,
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.green,
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
          ),
          //Scroll bar
          Container(
              alignment: Alignment.centerRight,
              height: MediaQuery.of(context).size.height,
              width: 20.0,
              margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 20.0),
              decoration: BoxDecoration(color: Colors.black12),
              child: Container(
                alignment: Alignment.topCenter,
                  child: GestureDetector(
                      child: Container(
                      height: 40.0,
                      width: 15.0,
                      margin:
                          EdgeInsets.only(left: 5.0, right: 5.0, top: _offset),
                      decoration: BoxDecoration(
                          color: Colors.grey, //Change Color here
                          borderRadius: BorderRadius.all(Radius.circular(3.0))),
                    ),
                      onVerticalDragUpdate: (dragUpdate) {
                        _controller.position.moveTo(dragUpdate.globalPosition.dy * 3.5);

                        setState(() {
                           if(dragUpdate.globalPosition.dy >= 0) {
                             _offset = dragUpdate.globalPosition.dy;
                           }
                          print("View offset ${_controller.offset} scroll-bar offset ${_offset}");
                        });
                      },
                ),
              )
          ),
        ],
      ),
    );
  }
}
Related