0

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.

demo image

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.

3
  • In _positionButton you're adding _responsiveImage but not implemented onTap method, just adding the image there. Commented Apr 4 at 11:38
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example. Commented Apr 4 at 17:32
  • @Kirtan, please check my code. I've tried all the systems already. Commented Apr 5 at 18:10

1 Answer 1

0

Move your _buildItem(context) from the bottom navigation to the body of the scaffold. Your tappable widgets are under the top stack widget, which is why your onTap of InkWell isn't working properly here. When you move the _buildItem to the body, it will be fixed.

Sign up to request clarification or add additional context in comments.

1 Comment

Same issue. Can you run my code? to resolve the issue quickly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.