onTap function not working for Align widgets in Flutter - flutter

Question

I have a widget with a GestureDetector inside of Stack having Align as a child(where onTap is registered)
The layout code is,
body: Stack(
children: [
Padding(
padding: EdgeInsets.only(top: 28.0.vs),
child: PageView.builder(
controller: _pageController,
onPageChanged: _changeCurrentSlide,
itemCount: 2,
itemBuilder: (context, index) => Align(
alignment: Alignment.topCenter,
child: Container(
height: 700.h,
child: Card(
elevation: 20,
color: AppColors.black,
child: Container(
width: 350.w,
child: Stack(
overflow: Overflow.visible,
children: [
Text('Hai'),
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () { print('hello'); },
child: Align(
alignment: Alignment(0, 1.1),
child: Material(
elevation: 20,
color: AppColors.transparent,
child: Container(
width: 70,
height: 40,
color: AppColors.goldenYellow,
child: Center(
child: Text(
'Next'
),
),
),
),
),
),
],
),
),
),
),
),
),
),
],
),
I need to call a function on tap of Align widget but only half the area of GestureDetector is working and on other half, onTap is not detected
Image for GestureDector, not working

Answer 1

This behavior occurs because the stack checks whether the pointer is inside its bounds before checking whether a child got hit:
If you notice the part of the button which is overflowing or not within the constraints of the Stack does not receive the tap. This is because the Stack widgets first checks whether the hit was inside its bounds before checking whether its child got tapped.
As a workaround you may wrap the parent widget of the Stack with Gesture detector and then check if the hit was within the bounds of your button or the intended widget. Please check the code below, I had to make some changes to your code in order to make my code work. Note if 'clipBehavior: Clip.none,' in my code gives you an error then you may comment it out and use 'overflow: Overflow.visible,' instead. Please check if this code works for you.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(
MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: MyApp(),
),
);
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final List<GlobalKey> _key = <GlobalKey>[];
final PageController _controller = PageController();
int _currentPage = 0;
void onTapDown(
BuildContext context,
TapDownDetails details,
) {
final RenderBox box = context.findRenderObject();
final Offset localOffset = box.globalToLocal(details.globalPosition);
final RenderBox containerBox =
_key[_currentPage].currentContext.findRenderObject();
final Offset containerOffset = containerBox.globalToLocal(localOffset);
final onTap = containerBox.paintBounds.contains(containerOffset);
if (onTap) {
print("hello");
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onTapDown: (TapDownDetails details) {
onTapDown(context, details);
},
child: Container(
width: 500,
height: MediaQuery.of(context).size.height,
color: Colors.white,
child: Stack(
children: [
Padding(
padding: EdgeInsets.only(
top: 28.0), // EdgeInsets.only(top: 28.0.vs),
child: PageView.builder(
controller: _controller, //_pageController,
onPageChanged: (val) {
_currentPage = val;
//_changeCurrentSlide();
},
itemCount: 2,
itemBuilder: (context, index) {
_key.add(GlobalKey());
return Align(
alignment: Alignment.topCenter,
child: Container(
height: 600, //700.h,
child: Card(
elevation: 20,
color: Colors.white, // AppColors.black,
child: Container(
width: 350, //350.w,
child: Stack(
//overflow: Overflow.visible,
clipBehavior: Clip.none,
children: [
Text('Hai'),
//GestureDetector(
// behavior: HitTestBehavior.opaque,
// onTap: () { print('hello'); },
// child:
Align(
alignment: Alignment(0, 1.1),
child: Material(
elevation: 20,
color: Colors
.transparent, // AppColors.transparent,
child: Container(
key: _key[index],
width: 70,
height: 40,
color: Colors
.black, //AppColors.goldenYellow,
child: Center(
child: Text('Next'),
),
),
),
),
//),
],
),
),
),
),
);
},
),
),
],
),
),
),
);
}
}