Flutter PageView not swipeable on web (desktop mode)
Solution 1
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.
Solution 2
on flutter 2.5.0 they change the scroll behavior check this Default drag scrolling devices
Solution 3
I used PageView in my Flutter portfolio website. I noticed that I couldn't swipe to change pages. Later I came to know that this could be done by my Mac's trackpad gestures. Since the PageView was horizontal, I had to horizontally swipe two fingers on my trackpad. You can try that.
amir_a14
Updated on January 01, 2023Comments
-
amir_a14 over 1 year
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