I'm relatively new to flutter app development. I'm trying to build a simple Tic Tac Toe game. I have added a GridView to simulate a 3 x 3 grid. For now, each column is a circle shape icon. I want to change this to either "X" or "O" based on player's turn. How can I place the specific image in a specific column after identifying whose turn is it?
This is the code:
@override
Widget build(BuildContext context) {
Container variable = Container(
decoration: BoxDecoration(
color: Colors.amber,
shape: BoxShape.circle,
),
);
if (headline == '') {
headline = "Home Page";
}
if (MediaQuery.of(context).orientation == Orientation.portrait) {
return (Scaffold(
appBar: AppBar(
title: Text(authUser.currentUser.email),
),
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: ListView(
children: <Widget>[
Padding(padding: EdgeInsets.all(20)),
Align(
alignment: Alignment.center,
child: Text(
'Player 1 (0 - 0) Player 2',
style: TextStyle(color: Colors.blue, fontSize: 22),
),
),
Padding(padding: EdgeInsets.all(20)),
Container(
margin: EdgeInsets.all(15),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 2,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 15,
crossAxisSpacing: 15,
crossAxisCount: 3),
itemBuilder: (context, index) {
if (index == 1 || index == 3 || index == 5 || index == 7) {
return GestureDetector(
onTap: () => onClickOdd(context, index),
child: InkWell(
onTap: () {
variable = (Container(
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
));
},
child: variable),
);
} else {
return GestureDetector(
onTap: () => onClickEven(context, index),
child: InkWell(
onTap: () {
variable = (Container(
decoration: BoxDecoration(
color: Colors.pink,
shape: BoxShape.circle,
),
));
},
child: variable),
);
}
},
itemCount: 9,
),
),
Container(
height: 65,
margin: EdgeInsets.only(
top: 50, left: 130, right: 130, bottom: 120),
child: ButtonTheme(
minWidth: 60,
height: 100,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)),
onPressed: () {
//Navigator.pushNamed(context, '/home');
},
child: Text(
'Button',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
)
],
),
),
));
} else {
return (Scaffold(
appBar: AppBar(
title: Text(authUser.currentUser.email),
),
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.black,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height,
color: Colors.blue[100],
),
Container(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height,
color: Colors.white,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: GridView.builder(
padding: EdgeInsets.only(top: 40),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10,
crossAxisCount: 3,
childAspectRatio: 1.8),
itemBuilder: (context, index) => GestureDetector(
onTap: () => onClickEven(context, index),
child: Container(
decoration: BoxDecoration(
color: Colors.blue[400],
shape: BoxShape.circle,
),
)),
itemCount: 9,
),
),
),
],
),
),
));
}
}
P.S: Sorry is you find part of the code duplicate, I'm trying to design different layout based on device's orientation.
This is the output I'm getting: Current Layout
Thanks!
you can use a logic here the logic isto make it even odd situation, suppose if the index is 0 its means it even then put here 0 , if 1 then then number is odd put here x.
