CODEWITHSUNDEEP
flutter
cs guy
cs guy

Reputation: 939

Flutter Make Scrollbar Non draggable

In Flutter 1.22 when you had a Material Scrollbar it would not be draggable meaning you were not able to use it to drag and change scroll position, in flutter 2.0 this is changed and by default you can change scroll position by dragging the scrollbar with your finger. Due to my app design, I want the scrollbar to be not draggable and pass its hit test to its children just like in 1.22.

I have checked the constructor of Scrollbar but this seems not possible anymore...

An example of Scrollbar:

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

Upvotes: 0

Views: 294

Answers (2)

cs guy
cs guy

Reputation: 939

I solved it by Forking Scrollbar:

Go to RawScrollbarState:

    Map<Type, GestureRecognizerFactory> get _gestures {
    // replace `if (controller == null)` with `if (controller == null || !widget.isDraggable)` 
    if (controller == null || !widget.isDraggable) return gestures;

Add the following lines to RawScrollbar and its inherited scrollbar subclasses:

// add the following as a field
final bool isDraggable;

// add the following to constructor
this.isDraggable = false,

For inherited class pass this value to parent with super.

If anyone wants to submit a PR on github, go ahead. Im too lazy to submit one.

Upvotes: 0

Adithaz
Adithaz

Reputation: 419

I think it is not possible anymore. Try this one

ListView.builder(
                primary: false,
                shrinkWrap: true,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),

With this you can scroll through listview without draggable like scrollbar.

Upvotes: 2

Related Questions