Scrollbar is not draggable

Question

I can see the scrollbar in the ListView, and I can scroll the ListView. But the problem is that I can not use/drag the scrollbar to scroll the ListView. It just appears as an indicator and doesn't respond touches/gestures.

Is this the expected behavior of the ScrollBar or am I doing something wrong? If so, how can I achieve that natively (without using a package, or do I have to)?

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Scrollbar(
            isAlwaysShown: true,
            controller: _scrollController,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),
          ),
        ),
      ),
    );
  }
}

Tugman

The scroll bar in most mobile apps is not meant to be interactable. It's simply there as an indicator of your position in the scrollable view. You will have to put some thin widget on the right side to capture tap and drag events (such as a GestureDetector) if you want to simulate an interactive scroll bar. – Reposeful

Interesting. I have always thought that the scrollbars are and should be interact-able. Thanks. I've started using draggable_scrollbar package for this now but if you can add an example for your suggestion, I can mark yours as the answer for my question. – Tugman

Answer 1

I found two simple ways to make the Scrollbar draggable (based on Flutter 3.0) without importing a 3rd-party plug-in: A: In Scrollbar settings, add

interactive: true,

B: Replace Scrollbar with CupertinoScrollbar. For whatever reason, the CupertinoScrollbar's default behavior appears to be exactly what you're looking for, i.e. having a draggable scrollbar that serves more than just being an axis indicator.

Praetorian

I haven't tried this yet but looks exactly what I needed. thanks. – Tugman

If you don't pass a ScrollController to the Scrollbar, make sure your list is marked as primary: true. – Kara

Answer 2

You can use draggable_scrollbar. By using draggable scrollbar the full code for you is given below.

import 'package:draggable_scrollbar/draggable_scrollbar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: DraggableScrollbar.rrect(
            controller: _scrollController,
            padding: EdgeInsets.zero,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),
          ),
        ),
      ),
    );
  }
}

Lamberto

Answer 3

just use RawScrollbar instead of Scrollbar - it'll make the scroll bar draggable and track also clickable

RawScrollbar(
  controller: jobScrollController,
  thumbColor: colorCode.withOpacity(0.8),
  radius: const Radius.circular(3.0),
  thickness: 10,
  child: ListView.builder(),
),

Corrigendum

Answer 4

Use a RawScrollbar widget to achieve this

Artina

Answer 5

I used Scrollbar with a ListView widget and had the same problem. I fixed it by setting a ScrollController on both Scrollbar- and Listview-widgets.

final ScrollController myScrollController = ScrollController();

Scrollbar(
  controller: myScrollController, // --apply your controller HERE! --
  thumbVisibility: true,
  trackVisibility: true,
  interactive: true, 
  child: ListView.builder(
    controller: yourScrollController, // --apply your controller HERE! --
    itemCount: yourRecordList?.length
    .
    .
    .
  )
)

Flow