Flutter scrollbar not draggable on windows desktop

user_14210364 0
Viewed 1536

There seems to be an issue with the scrollbar not being draggable on Flutter desktop. I'm not sure if the issue is also present on ios/android or mac but I'm developing my app on Flutter windows and I'm not able to use the scrollbar when it get's automatically applied for example to a List of ListTiles.

1

I'm directly able to drag the ListTiles which moves the List down but the scrollbar is not draggable. That could become a problem for laptop users who do not use a mouse and might not be familiar with their touchpad.

dart flutter
2 Answers

This behavior is updated in Flutter 2.5, release.

You can update scrollBehavior of a context or of the whole MaterialApp, works perfect:

https://flutter.dev/docs/release/breaking-changes/default-scroll-behavior-drag

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}

// Set ScrollBehavior for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);
user_3051350

You can scroll DataTable (tested on macOS Desktop Platform). https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag#copy-and-modify-existing-scrollbehavior

class ScrollDemo extends StatefulWidget {
  const ScrollDemo({Key? key}) : super(key: key);

  @override
  _ScrollDemoState createState() => _ScrollDemoState();
}

class _ScrollDemoState extends State<ScrollDemo> {
  final ScrollController _tableHorizontalController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Scrollbar(
            isAlwaysShown: true,
            controller: _tableHorizontalController,
            child: ScrollConfiguration(
                behavior: ScrollConfiguration.of(context)
                    .copyWith(dragDevices: {PointerDeviceKind.touch, PointerDeviceKind.mouse}),
                child: SingleChildScrollView(
                    controller: _tableHorizontalController,
                    scrollDirection: Axis.horizontal,
                    child: DataTable(
                      decoration: BoxDecoration(
                          border: Border.all(
                        color: Colors.black,
                      )),
                      columns: [],
                      rows: [],
                    )))));
  }
}
user_20557820
Related