CODEWITHSUNDEEP
flutterdart
JonasLevin
JonasLevin

Reputation: 2109

Flutter scrollbar not draggable on windows desktop

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.

Upvotes: 5

Views: 3341

Answers (2)

Mohsin AR
Mohsin AR

Reputation: 3108

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: [],
                    )))));
  }
}

Upvotes: 0

AVEbrahimi
AVEbrahimi

Reputation: 19184

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(),
  // ...
);

Upvotes: 15

Related Questions