Flutter PageView not swipeable on web (desktop mode)

Issue

I’m new to flutter.
I implemented flutter PageView with the help of its documents:

/// Flutter code sample for PageView

// Here is an example of [PageView]. It creates a centered [Text] in each of the three pages
// which scroll horizontally.

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController(initialPage: 0);
    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      scrollDirection: Axis.horizontal,
      controller: controller,
      children: const <Widget>[
        Center(
          child: Text('First Page'),
        ),
        Center(
          child: Text('Second Page'),
        ),
        Center(
          child: Text('Third Page'),
        )
      ],
    );
  }
}

And I run it on Android, it works well.
and It works also in web (mobile mode).

But when I run it on chrome (web|desktop) pages are not swipeable, and there is no way to change pages.

How to enable swipe on web desktop export?

Flutter version is 2.5.2

Solution

Thanks to Bigfoot, For support swipe with mouse, we need to change default scroll behavior of app by these steps:

1- Create a class, extend it from MaterialScrollBeavior, and override dragDevices:

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

2- Pass an AppScrollBehavior instance to scrollBehavior property of MaterialApp:

MaterialApp(
      scrollBehavior: AppScrollBehavior(),
      ...
    );

After that, we can swipe between pages also with mouse.

Answered By – amir_a14

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *