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

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.

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