Flutter how to prevent scroll in a specific area in PageView - flutter

Question

I have a page with tabbars as header and Pageview for body. The problem that I'm facing is due to the PageView is scrollable and one of the pages requires to do signatures, when I drag to draw on the signature widget, it makes the whole PageView to scroll. Is there a way to stop pageview to scroll while drawing signatures? Like stop gesture from passing to parent widget?
Thanks
My simple sample code:
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
bottom: ColoredTabBar(
tabBarBackgroundColor,
TabBar(
isScrollable: true,
controller: _tabController,
tabs: _tabsInfo.map((EditSafetyPlanTab tabInfo) {
return Tab(
text: tabInfo.label,
);
}).toList()),
),
),
body: PageView.builder(
controller: _pageController,
onPageChanged: (index) {
if (isPageCanChanged) {
onPageChange(index);
}
},
itemCount: _tabsInfo.length,
itemBuilder: (context, index) => buildPage(index, _tabsInfo),
),
);

Answer 1

Update
I had to add "MyHorizontalDragGestureRecognizer" and enable/disable scroll physics to make it work on Android.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class AppScrollBehavior extends MaterialScrollBehavior {
#override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}
class MyApp extends StatelessWidget {
const MyApp({super.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 MyStatefulWidget(),
),
scrollBehavior: AppScrollBehavior(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class MyHorizontalDragGestureRecognizer
extends HorizontalDragGestureRecognizer {
#override
void rejectGesture(int pointer) {
acceptGesture(pointer);
}
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Offset offset = Offset.zero;
final PageController controller = PageController();
ScrollPhysics physics = AlwaysScrollableScrollPhysics();
#override
Widget build(BuildContext context) {
return PageView(
physics: physics,
controller: controller,
children: <Widget>[
Center(
child: RawGestureDetector(
gestures: {
MyHorizontalDragGestureRecognizer:
GestureRecognizerFactoryWithHandlers<
MyHorizontalDragGestureRecognizer>(
() => MyHorizontalDragGestureRecognizer(),
(instance) {
instance.onDown = (_) => disableScroll();
instance.onCancel = () => enableScroll();
instance.onEnd = (_) => enableScroll();
instance.onUpdate = (details) {
setState(() {
offset = details.localPosition;
});
};
},
),
},
child: Container(
color: const Color(0xFFCCCCCC),
width: 200,
height: 200,
child: Center(
child: Text(
'x: ${offset.dx.toStringAsFixed(0)}, y: ${offset.dy.toStringAsFixed(0)}',
),
),
),
),
),
const Center(
child: Text('Second Page'),
),
],
);
}
disableScroll() {
setState(() {
physics = NeverScrollableScrollPhysics();
});
}
enableScroll() {
setState(() {
physics = AlwaysScrollableScrollPhysics();
});
}
}
You have to wrap your widget with RawGestureDetector and register a HorizontalDragGestureRecognizer or a VerticalDragGestureRecognizer depending on your scrollDirection.
The GestureRecognizer of the signature widget will win against the recognizer of the PageView in the gesture arena.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class AppScrollBehavior extends MaterialScrollBehavior {
#override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}
class MyApp extends StatelessWidget {
const MyApp({super.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 MyStatefulWidget(),
),
scrollBehavior: AppScrollBehavior(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Offset offset = Offset.zero;
final PageController controller = PageController();
#override
Widget build(BuildContext context) {
return PageView(
physics: const AlwaysScrollableScrollPhysics(),
controller: controller,
children: <Widget>[
Center(
child: RawGestureDetector(
gestures: {
HorizontalDragGestureRecognizer:
GestureRecognizerFactoryWithHandlers<
HorizontalDragGestureRecognizer>(
() => HorizontalDragGestureRecognizer(),
(instance) {
instance.onUpdate = (details) {
setState(() {
offset = details.localPosition;
});
};
},
),
},
child: Container(
color: const Color(0xFFCCCCCC),
width: 200,
height: 200,
child: Center(
child: Text(
'x: ${offset.dx.toStringAsFixed(0)}, y: ${offset.dy.toStringAsFixed(0)}',
),
),
),
),
),
const Center(
child: Text('Second Page'),
),
],
);
}
}

Answer 2

You can use behavior property of GestureDetector:
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () { ... },
)