Adding a Scrollbar to a CustomScollView

Question

I've been trying to figure out how to add a Scrollbar Widget to a CustomScrollView. One would usually just have to wrap a ListView or ScrollView with a Scrollbar Widget, pass in the same ScrollController and boom, it's rendered.

Here is a minimal code block.

CustomScrollView(
            slivers: [
              SliverAppBar(
                title: Hero(
                  tag: 'title',
                  child: RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'Not',
                          style: TextStyle( fontSize: 20, fontWeight: FontWeight.w500),
                        ),
                        TextSpan(
                          text: '3s',
                          style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
                        )
                      ],
                    ),
                  ),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    return Container(); })));

Answer 1

With more recent versions of Flutter the isAlwaysShown is no longer available.

The following options do the job:

            Scrollbar(
              controller: _controller,
              thumbVisibility: true,
              trackVisibility: true,
              radius: const Radius.circular(10),
              thickness: 20,
              child: CustomScrollView(
                  controller: _controller,

That said, it overlap content and so far I'm not sure how to reduce content size so that it doesn't.

Answer 2

I got it.

Create a _scrollController.

Wrap the CustomScrollView() in a ScrollBar() Widget.

Set the controller: parameter of BOTH CustomerScrollView and ScrollBar as the _scrollController.

final _scrollController = ScrollController();
return Scaffold(
  body: Scrollbar(
    controller: _scrollController,
    isAlwaysShown: true,
    child: CustomScrollView(
      controller: _scrollController,
      slivers: <Widget> [
        ...

Modify as you need.