Flutter Gesture detector onTap problems

Question

I am new to flutter and I'm trying to make tic tac toe game; i had some on ontap despite following the same concept in Flutter GestureDetector, onTap gets triggered automatically, how to?

My code to return the gridcells intially with red color and blank text

return Scaffold(
        appBar: AppBar(title: Text('Tic Tac Toe')),
        body: GridView.count(
          crossAxisCount: 3,
          crossAxisSpacing: 2.0,
          mainAxisSpacing: 2.0,
          children: List<Widget>.generate(
            9,
            (int index){
              return new GridCell(
                index:index,
                    color: Colors.red,
                    text:Text(' '),
                  );
            })));

Then the class of the gridcell is:

class GridCell extends StatefulWidget {
  final Color color;
 final Text text;
   final int index;


  GridCell({Key key, this.color,this.text,this.index}) : 
  super(key: key);

  @override
  GridCellState createState() {
    return new GridCellState();
  }
}

    class GridCellState extends State<GridCell> {
      Color cellColor=Colors.white;
      Text cellText=new Text(' ');
      String choice=' ';

      @override
         void initState() {
        super.initState();
        choice;
        cellColor=widget.color;
        cellText=widget.text;
      }
    //get text function to switch the x and o between the players
      String  _getText(){

        if (choice=='X'){
          choice='O';
        }
    else{
      choice='X';
    }
    return choice;
      }
    _changeCell(index) {
        setState(() {
          switch (index) {
            case 0:
              cellColor = Colors.lightBlue;
              cellText = new Text(choice);
              print(_getText());
              break;
            case 1:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                        print(_getText());
              print(_getText());

              break;
            case 2:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                        print(_getText());

              break;

            case 3:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                        print(_getText());

              break;
            case 4:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 5:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 6:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 7:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 8:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                  print(_getText());

              break;


          }
        });
      }

      @override
      Widget build(BuildContext context) {
        return new GestureDetector(
         onTap:()=>_changeCell(widget.index),
         child:Container(
           height:20.0,
           color:Theme.of(context).primaryColor,
         ),
       );
      }
    }

The expected behaviour is 9 redgridcells appears and when i press one of the its text turns into X and its color turns into lightblue, the second press on another cell will have text O and color light blue the third's text is X and so on. The actual behaviour is 9 blue gridcells and when i press any of them nothing changes!

Thanks in advance:)

What is the problem or the error? What is the expected behavior? What is the actual behavior? — Günter Zöchbauer, Sep 01 '18 at 16:02
Thank you so much for your comment. The expected behaviour is 9 redgridcells appears and when i press one of the its text turns into X and its color turns into lightblue, the second press on another cell will have text O and color light blue the third's text is X and so on. The actual behaviour is 9 blue gridcells and when i press any of them i have errors in the ui written in the terminal — Mee, Sep 01 '18 at 16:08
Sorry i edited the last comment and added the actual behaviour. could you please check it? — Mee, Sep 01 '18 at 16:11

score 0 · Answer 1 · answered Sep 01 '18 at 16:17

0

You are getting an error because choice is initialized to null and never really had a value before using it with Text(choice) or the conditional statement.

answered Sep 01 '18 at 16:17

Shady Aziza

50,824
20
115
113

I initialised it to choice=' '; but the gridcells still appear to be initially blue don't why, and the text is not updated after clicking on the cell – Mee Sep 01 '18 at 16:28

score 0 · Answer 2 · answered Jul 29 '20 at 08:46

Add color: Colors.transparent, to the Container child of the GestureDetector

And your widget will looks:

@override
      Widget build(BuildContext context) {
        return new GestureDetector(
         onTap:()=>_changeCell(widget.index),
         child:Container(
           height:20.0,
           color:Theme.of(context).primaryColor,
         ),
       );
      }

Flutter Gesture detector onTap problems

2 Answers2