Here I'm facing a issue on Flutter stack widget ontap function.Many time i'm tring to do it , but i can't.
Here is a demo image, where I want to call onTap function.
Here is my code :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
),
);
runApp(SpinWheelApp());
}
class SpinWheelApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Demo App',
home: TestDemo(),
);
}
}
class TestDemo extends StatefulWidget {
@override
State<TestDemo> createState() => _TestDemoState();
}
class _TestDemoState extends State<TestDemo> {
int _gameRoundTime = 10;
Future _startGame() async {
_gameRoundTime = 10;
Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
_gameRoundTime = _gameRoundTime - 1;
if (_gameRoundTime <= 0) {
timer.cancel();
_gameRoundTime = 10;
}
});
});
}
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
resizeToAvoidBottomInset: false,
body: Image.asset(
'assets/images/bgImage.png',
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.fitHeight,
),
// backgroundColor: Colors.red,
bottomNavigationBar: FittedBox(
child: Container(
// height: MediaQuery.of(context).size.height -
// MediaQuery.of(context).size.height / 2.34,
// height: MediaQuery.of(context).size.height - 220,
width: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () async {
_startGame();
},
child: Text('$_gameRoundTime')),
SizedBox(),
_buildItem(context),
],
),
),
),
);
}
Widget _buildItem(
BuildContext context,
) {
return _centerItem(context);
}
Widget _centerItem(BuildContext context) {
return Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
_bottomItem(context),
Positioned(
top: -240,
child: Stack(
alignment: Alignment.center,
children: [
_responsiveImage(
image: 'centerItem.png',
),
Positioned(
child: InkWell(
onTap: () async {
await _startGame();
},
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: TextButton(
onPressed: () async {
await _startGame();
},
child: Text(
'data',
),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 57),
child: Text(
_gameRoundTime == 10 ? 'Start' : '$_gameRoundTime\ s',
style: TextStyle(
fontSize: _gameRoundTime == 10 ? 12 : null,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
_positionButton(
top: -347,
children: [
_responsiveImage(
image: 'topCenter.png',
),
Text(
'x10',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
// Positioned(
// top: -347,
// child: Stack(
// alignment: Alignment.center,
// clipBehavior: Clip.none,
// children: [
// _responsiveImage(
// image: 'topCenter.png',
// ),
// Text(
// 'x10',
// ),
// ],
// ),
// ),
_positionButton(
top: -345,
left: 24,
children: [
_responsiveImage(
image: 'topLeft1.png',
),
Padding(
padding: EdgeInsets.only(right: 10, top: 20),
child: Text(
'x5',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -345,
// left: 24,
// child: _responsiveImage(
// image: 'topLeft1.png',
// ),
// ),
_positionButton(
top: -345,
right: 24,
children: [
_responsiveImage(
image: 'topRight.png',
),
Padding(
padding: EdgeInsets.only(left: 5, top: 20),
child: Text(
'x15',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -345,
// right: 24,
// child: _responsiveImage(
// image: 'topRight.png',
// ),
// ),
_positionButton(
top: -215,
left: 30,
children: [
_responsiveImage(
image: 'centerLeft1.png',
),
Padding(
padding: EdgeInsets.only(right: 30, top: 25),
child: Text(
'x5',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -215,
// left: 30,
// child: _responsiveImage(
// image: 'centerLeft1.png',
// ),
// ),
_positionButton(
top: -215,
right: 30,
children: [
_responsiveImage(
image: 'rightCenter.png',
),
Padding(
padding: EdgeInsets.only(left: 30, top: 25),
child: Text(
'x25',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -215,
// right: 30,
// child: _responsiveImage(
// image: 'rightCenter.png',
// ),
// ),
_positionButton(
top: -175,
left: 31,
children: [
_responsiveImage(
image: 'bottomLeft.png',
),
Padding(
padding: EdgeInsets.only(right: 15, top: 35),
child: Text(
'x5',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -175,
// left: 31,
// child: _responsiveImage(
// image: 'bottomLeft.png',
// ),
// ),
_positionButton(
top: -175,
right: 31,
children: [
_responsiveImage(
image: 'bottomRight.png',
),
Padding(
padding: EdgeInsets.only(left: 5, top: 35),
child: Text(
'x45',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -175,
// right: 31,
// child: _responsiveImage(
// image: 'bottomRight.png',
// ),
// ),
_positionButton(
top: -120,
children: [
_responsiveImage(
image: 'bottomCenter.png',
),
Padding(
padding: EdgeInsets.only(left: 5, top: 55),
child: Text(
'x5',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
// Positioned(
// top: -120,
// // right: 31,
// child: _responsiveImage(
// image: 'bottomCenter.png',
// ),
// ),
],
);
}
Widget _positionButton(
{double? top,
double? bottom,
double? right,
double? left,
required List<Widget> children}) {
return Positioned(
top: top,
bottom: bottom,
right: right,
left: left,
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: children,
),
);
}
Widget _bottomItem(BuildContext context) {
return Stack(
alignment: Alignment.bottomCenter,
clipBehavior: Clip.none,
children: [
Positioned(
bottom: 160,
child: _responsiveImage(
image: 'tower.png',
height: 200,
),
),
_bottomImage(context),
],
);
}
}
Widget _responsiveImage({
required String image,
double? height,
double? width,
void Function()? onTap,
}) {
return InkWell(
onTap: onTap,
child: SizedBox(
width: width,
height: height,
child: Image.asset(
'assets/images/$image',
fit: BoxFit.contain,
),
),
);
}
Widget _bottomImage(BuildContext context) {
return Center(
child: FittedBox(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width > 310 ? 200 : null,
// height: bottomImageHeight,
child: Image.asset(
'assets/images/bottomItem.png',
fit: BoxFit.fitWidth,
),
),
),
);
}
i've pass Gesturedectector on _positionButton widget. When I click on button No response. Maybe some constraints box issue. please check and give me review.

_positionButtonyou're adding_responsiveImagebut not implemented onTap method, just adding the image there.