Blog

Introduction

Drag scroll for Flutter desktop and web apps is something that needs to be enabled through some workarounds even when it is enabled by default for the mobile apps. Why is that? An obvious question but no clear answer, what should be a default functionality needs some workaround to get it working and that will be the topic we will explore today.

Mouse Drag Scroll Behavior Implementation

Mouse Scrolling Behavior

Without wasting any more time let’s get right down to business. Go to your project directory’s lib folder and create a new file called scroll_behavior.dart and paste the following lines of code.
scroll_behavior.dart

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

class MyCustomScrollerBehavior extends MaterialScrollBehavior{
  @override
  Set<PointerDeviceKind> get dragDevices =>{
    PointerDeviceKind.mouse,
    PointerDeviceKind.touch,
  };
}

What this file does is first of all import two built-in Flutter libraries called material.dart and gestures.dart. Afterwards it implements a class called MyCustomScrollerBehavior which extends Flutter Framework’s MaterialScrollBehavior class. Then the dragDevices set is modified to include two PointerDeviceKind which in turn enables support for ListView scrolling behavior for both desktop apps and web apps alongside mobile devices.

Import The Custom Scroller Behavior

Importing the Mouse Scroll Behavior in MaterialApp

Go to your main.dart file and paste the following code snippet.
main.dart

import 'package:flutter/material.dart';
import 'package:flutter_utilities/scroll_behavior.dart';

void main() {
  runApp(MaterialApp(
    // Assign Scroll Behavior Here
    scrollBehavior: MyCustomScrollerBehavior(),
    home: const MyApp(),
  ));
}

The code snippet above imports the material.dart and scroll_behavior.dart file where we configured our mouse scrolling behavior parameters to enable mouse scrolling for flutter desktop and web apps. Next, in the MaterialApp widget’s scope we assign MyCustomScrollerBehavior() to scrollBehavior and then we can run our app as usual.

Testing Mouse Drag Scroll For Flutter Desktop

I will test the logic on an app I previously developed as a testing ground for my experiments. Basically all that we need to do is hover over the ListView and then click and drag it to move it. Let’s see this in action.

As evident above the CustomScrollBehavior() works flawlessly.

Testing Mouse Drag Scroll For Flutter Web App

Just like the Desktop app we will now test the same logic with Flutter Web App. Let’s see if the ListView scrolling works for Flutter’s web app too.

As evident above the CustomScrollBehavior() works flawlessly.

Conclusion

In this post we learned

• To Implement Custom Mouse Scrolling Logic.
• To Include or Exclude Which Devices Will Have The Click and Scroll Functionality Enabled For ListView.
• To import the Custom Scroller Behavior Into Our MaterialApp

That’s all for this post, For more Flutter related topics please check out the Flutter Archives. Thank you for reading.