Horizontal scrolling does not work on some windows machines using trackpad

Steps to Reproduce

Execute flutter run on the code sample
.Try to scroll horizontally

Expected results: The SingleChildScrollView, or in fact, any Horizontally Scrollable Widget, should scroll horizontally.

Actual results: The widget is not scrollable as the horizontal scroll on trackpad changes focus on the AppBar Buttons

I am aware that there has been a simillar issue for this as in #83359 and #82982, suggesting to fix it by applying a custom scroll behaviour

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

But this does not solve this issue. Also, this issue is not present on Web. If this is not an issue and is the intended behavior, then how can we disable this behavior on our side and not flutter side.

Code sample

import 'package:flutter/material.dart';

void main() => runApp(const HorizontalScrollingNotWorkingApp());

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

  @override
  State<HorizontalScrollingNotWorkingApp> createState() =>
      _HorizontalScrollingNotWorkingAppState();
}

class _HorizontalScrollingNotWorkingAppState
    extends State<HorizontalScrollingNotWorkingApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Classic Material App Bar'),
          leading: const BackButton(),
          actions: [
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.crop),
            ),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.info_outline),
            ),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.settings),
            ),
          ],
        ),
        body: Center(
            child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Container(
              color: Colors.red,
              height: MediaQuery.of(context).size.height * 0.8,
              width: 2000,
            ),
          ),
        )),
      ),
    );
  }
}

Logs

No Error Shown On Windows.

No Analysis Errors Shown on Windows.

[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.25126.1000], locale en-IN)
    • Flutter version 3.0.1 at D:\SDKs\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (12 days ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at D:\SDKs\android_sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: D:\IDEs\AndroidStudio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.0)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31025.194
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at D:\IDEs\AndroidStudio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] VS Code (version 1.67.2)
    • VS Code at C:\Users\Naman Bharat Gor\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.18.1

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.25126.1000]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 101.0.4951.67
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 100.0.1185.50

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@namangor04

Hello @namangor04. The code sample you provided has a single solid color which is why you can't notice the scroll. I have modified the code to include a green container as well. See the video of the scrolling.

Video

105095_macos_stable.mov

Code sample

import 'package:flutter/material.dart';

void main() => runApp(const HorizontalScrollingNotWorkingApp());

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

  @override
  State<HorizontalScrollingNotWorkingApp> createState() =>
      _HorizontalScrollingNotWorkingAppState();
}

class _HorizontalScrollingNotWorkingAppState
    extends State<HorizontalScrollingNotWorkingApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Classic Material App Bar'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                Container(
                  color: Colors.red,
                  height: MediaQuery.of(context).size.height * 0.8,
                  width: 2000,
                ),
                Container(
                  color: Colors.green,
                  height: MediaQuery.of(context).size.height * 0.8,
                  width: 2000,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v (Stable)

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.0.1 at /Users/nabeelparkar/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (12 days ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.58

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Brave Browser 102.1.39.111

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

flutter doctor -v (Master)

[✓] Flutter (Channel master, 3.1.0-0.0.pre.1035, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.1.0-0.0.pre.1035 at /Users/nabeelparkar/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3d62732d60 (2 hours ago), 2022-06-01 00:14:14 -0400
    • Engine revision 0d1057ef7b
    • Dart version 2.18.0 (build 2.18.0-157.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.58

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Brave Browser 102.1.39.111

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@exaby73

Hello @exaby73, I noticed that you sent me the video which was recorded on MacOS. But I am using windows and I am having issues on windows stable, not MacOS stable. I would like you to reopen this issue asap. I am also attaching a file filmed using your code sample which clearly shows that this horizontal scrolling on windows does not work

flutter_issue.2022-06-01.15-20-54.mp4

@namangor04

Hey @namangor04. I'm assuming you are pressing Shift while using the scroll wheel to scroll horizontally. Can you confirm if this is also on the web?

This is not on web, this is on windows only. I am not pressing shift sir.

Edit: And I can confirm that even if I do press shift, there is no difference. I checked it right now.

And I am on laptop using a trackpad, not a Scroll wheel.

@namangor04

@namangor04, I can confirm that horizontal Listview is scrollable on windows, It may be that the container width is large enough with a single color and as a result, the scroll is not noticeable, I have added a scrollbar to this code sample shared above and it should be clearly visible.

scrollIssue_Trim.mp4

code sample

import 'package:flutter/material.dart';

void main() => runApp(const HorizontalScrollingNotWorkingApp());

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

  @override
  State<HorizontalScrollingNotWorkingApp> createState() =>
      _HorizontalScrollingNotWorkingAppState();
}

class _HorizontalScrollingNotWorkingAppState
    extends State<HorizontalScrollingNotWorkingApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  ScrollController controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Classic Material App Bar'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Scrollbar(
            controller: controller,
            child: SingleChildScrollView(
              controller: controller,
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  Container(
                    color: Colors.red,
                    height: MediaQuery.of(context).size.height * 0.8,
                    width: 2000,
                  ),
                  Container(
                    color: Colors.green,
                    height: MediaQuery.of(context).size.height * 0.8,
                    width: 2000,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

PS C:\Users\mahesh\Desktop\keyboardissue> flutter --version
Flutter 3.0.1 • channel stable • https://github.com/flutter/flutter.git  
Framework • revision fb57da5f94 (13 days ago) • 2022-05-19 15:50:29 -0700
Engine • revision caaafc5604
Tools • Dart 2.17.1 • DevTools 2.12.2
PS C:\Users\mahesh\Desktop\keyboardissue>

I'm on mac
and mouse wheel doesn't work when Axis.horizontal (only with pressed 'shift')
Could you put this in the doc so developers can show managers that flutter doesn't allow scroll with mouse

ListView.builder( scrollDirection: Axis.horizontal

Any updates on this?

I have a suggested solution, If you want to achieve horizontal scrolling using your scroll wheel there is a good chance you may not need the user to scroll vertically in the exact same scope. If this is the case then all you have to do is listen to the input vertically and applying those changes to the scroll controller horizontally

For example:


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

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

  @override
  State<ExampleScrolling> createState() => _ExampleScrollingState();
}

class _ExampleScrollingState extends State<ExampleScrolling> {
  
  final scrollController = ScrollController();
  
  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: (event) {
        if(event is PointerScrollEvent) {
          //if the event is a scroll event then flutter has caught a scroll event
          //regardless of it being horizontal or vertical
          //we notice that the offset's dx is always zero while the offset's dy
          //is changing regardless if we where pressing shift or not while scrolling
          
          //thus we want to apply these changes to this controller which acts horizontally
          //on the horizontally scrolling listview
          //we can also customize the way and duration it takes to scroll
          scrollController.animateTo(scrollController.offset + event.scrollDelta.dy,
                      duration: Duration(milliseconds: 2), curve: Curves.bounceIn);
        }
      },
      child: ListView(
        controller: scrollController,
        scrollDirection: Axis.horizontal,
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ],
      ),
    );
  }
}

Thank for the suggestion.
This is working.

The triaged-desktop label is irrelevant if there is no team-desktop label or fyi-desktop label.

also does not work on linux (Ubuntu 22.04). Mousewheel horizontal scrolling is broken, with workarounds I am able to scroll by click & drag. No Scrollbar showing up though (SingleChildScrollview). Same Code works on MacOS Desktop

Any update for this? Same behavior here.

A working solution for Windows 10: horizontal mouse scrolling and touch scrolling.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal Scroll Demo (Windows 10)',
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Horizontal Scroll Demo (Windows 10)')),
        body: Center(
          child: Container(
            height: 150,
            color: Colors.grey[300],
            child: ScrollConfiguration(
              behavior: MouseScrollBehavior(),
              child: ScrollMouseHandler(
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  primary: true, // Required for mouse wheel scroll
                  physics: const ClampingScrollPhysics(
                    parent: AlwaysScrollableScrollPhysics(),
                  ),
                  itemCount: 100,
                  itemBuilder:
                      (context, index) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          width: 100,
                          decoration: BoxDecoration(
                            color: Colors.deepPurple,
                            borderRadius: BorderRadius.circular(10),
                            border: Border.all(color: Colors.white, width: 2),
                          ),
                          child: Center(
                            child: Text(
                              '$index',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                              ),
                            ),
                          ),
                        ),
                      ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ScrollMouseHandler extends StatefulWidget {
  final Widget child;
  const ScrollMouseHandler({required this.child, super.key});

  @override
  State<ScrollMouseHandler> createState() => _ScrollMouseHandlerState();
}

class _ScrollMouseHandlerState extends State<ScrollMouseHandler> {
  final ScrollController _controller = ScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _handlePointerSignal(PointerSignalEvent event) {
    if (event is PointerScrollEvent) {
      if (!_controller.hasClients) return;
      final double delta = event.scrollDelta.dy;
      _controller.animateTo(
        _controller.offset + delta,
        duration: const Duration(milliseconds: 80),
        curve: Curves.easeOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: _handlePointerSignal,
      child: PrimaryScrollController(
        controller: _controller,
        child: widget.child,
      ),
    );
  }
}

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

Navigation Menu

Repository navigation

Horizontal scrolling does not work on some windows machines using trackpad #105095

Steps to Reproduce

60 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Horizontal scrolling does not work on some windows machines using trackpad #105095

Description

Steps to Reproduce

Activity

exaby73 commented on Jun 1, 2022

devNamanG commented on Jun 1, 2022

exaby73 commented on Jun 1, 2022

devNamanG commented on Jun 1, 2022

maheshj01 commented on Jun 1, 2022

60 remaining items

khomin commented on Aug 8, 2023

devNamanG commented on Sep 8, 2023

FTKhanFT commented on Feb 13, 2024

flutter-triage-bot commented on Jun 6, 2024

RuedigerMoeller commented on Jul 9, 2024

gmenezes-sistemas commented on Jul 28, 2025

Good-Andre commented on Dec 4, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions