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
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.
Update Flutter 3.3:
From flutter 3.3, trackpad on laptops not working for scroll and swipe actions, if you need to support trackpad too, you need add PointerDeviceKind.trackpad
to dragDevices like this:
class AppScrollBehavior extends MaterialScrollBehavior {
@override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
PointerDeviceKind.trackpad,
};
}