Flutter SDK es un kit de desarrollo de software de código abierto para crear una hermosa interfaz de usuario compilada de forma nativa. En este artículo, construiremos un juego de Tic Tac Toe. Usaremos VS Code IDE para este proyecto, también puede usar Android Studio. Los conceptos que se tratan son:
- Mostrando Widgets en la pantalla.
- GridView.builder
- Escritura de funciones
- Detector de gestos
- Si y si no en dart
Siga los pasos a continuación para implementar el juego Tic-Tac-Toe. Empecemos.
Paso 1: crear una aplicación de Flutter
Abra la Terminal / Símbolo del sistema. Cambie el Directorio a su elección y ejecute
flutter create tic_tac_toe
Abra el tres en raya en VS Code o Android Studio.
Paso 2: Codificación de la aplicación de tic-tac-toe
En la carpeta Lib, ya hay un archivo main.dart presente. Ahora, agregue el siguiente código en el archivo main.dart.
Interfaz de usuario para Tic-Tac-Toe
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// declarations
bool oTurn = true;
// 1st player is O
List<String> displayElement = ['', '', '', '', '', '', '', '', ''];
int oScore = 0;
int xScore = 0;
int filledBoxes = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[900],
body: Column(
children: <Widget>[
Expanded(
// creating the ScoreBoard
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Player X',
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
xScore.toString(),
style: TextStyle(fontSize: 20,color: Colors.white),
),
],
),
),
Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Player O', style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)
),
Text(
oScore.toString(),
style: TextStyle(fontSize: 20,color: Colors.white),
),
],
),
),
],
),
),
),
Expanded(
// Creating the Board for Tic tac toe
flex: 4,
child: GridView.builder(
itemCount: 9,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
_tapped(index);
},
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white)),
child: Center(
child: Text(
displayElement[index],
style: TextStyle(color: Colors.white, fontSize: 35),
),
),
),
);
}),
),
Expanded(
// Button for Clearing the Enter board
// as well as Scoreboard to start allover again
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.indigo[50],
textColor: Colors.black,
onPressed: _clearScoreBoard,
child: Text("Clear Score Board"),
),
],
),
))
],
),
);
}
// filling the boxes when tapped with X
// or O respectively and then checking the winner function
void _tapped(int index) {
setState(() {
if (oTurn && displayElement[index] == '') {
displayElement[index] = 'O';
filledBoxes++;
} else if (!oTurn && displayElement[index] == '') {
displayElement[index] = 'X';
filledBoxes++;
}
oTurn = !oTurn;
_checkWinner();
});
}
}
Función para verificar el ganador: la función definida a continuación se puede usar para verificar el ganador en el juego. Utiliza la misma lógica que el propio juego, es decir, en función de los elementos de cada casilla.
Dart
void _checkWinner() {
// Checking rows
if (displayElement[0] == displayElement[1] &&
displayElement[0] == displayElement[2] &&
displayElement[0] != '') {
_showWinDialog(displayElement[0]);
}
if (displayElement[3] == displayElement[4] &&
displayElement[3] == displayElement[5] &&
displayElement[3] != '') {
_showWinDialog(displayElement[3]);
}
if (displayElement[6] == displayElement[7] &&
displayElement[6] == displayElement[8] &&
displayElement[6] != '') {
_showWinDialog(displayElement[6]);
}
// Checking Column
if (displayElement[0] == displayElement[3] &&
displayElement[0] == displayElement[6] &&
displayElement[0] != '') {
_showWinDialog(displayElement[0]);
}
if (displayElement[1] == displayElement[4] &&
displayElement[1] == displayElement[7] &&
displayElement[1] != '') {
_showWinDialog(displayElement[1]);
}
if (displayElement[2] == displayElement[5] &&
displayElement[2] == displayElement[8] &&
displayElement[2] != '') {
_showWinDialog(displayElement[2]);
}
// Checking Diagonal
if (displayElement[0] == displayElement[4] &&
displayElement[0] == displayElement[8] &&
displayElement[0] != '') {
_showWinDialog(displayElement[0]);
}
if (displayElement[2] == displayElement[4] &&
displayElement[2] == displayElement[6] &&
displayElement[2] != '') {
_showWinDialog(displayElement[2]);
} else if (filledBoxes == 9) {
_showDrawDialog();
}
}
Código para los cuadros de diálogo Win & Draw: Los siguientes códigos muestran el cuadro de diálogo cada vez que un usuario gana o el partido es un empate.
Dart
void _showWinDialog(String winner) {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("\" " + winner + " \" is Winner!!!"),
actions: [
FlatButton(
child: Text("Play Again"),
onPressed: () {
_clearBoard();
Navigator.of(context).pop();
},
)
],
);
});
if (winner == 'O') {
oScore++;
} else if (winner == 'X') {
xScore++;
}
}
void _showDrawDialog() {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Draw"),
actions: [
FlatButton(
child: Text("Play Again"),
onPressed: () {
_clearBoard();
Navigator.of(context).pop();
},
)
],
);
});
}
Despejar los tableros después del fin del juego: el siguiente código se puede usar para despejar el tablero una vez que finaliza el juego.
Dart
void _clearBoard() {
setState(() {
for (int i = 0; i < 9; i++) {
displayElement[i] = '';
}
});
filledBoxes = 0;
}
void _clearScoreBoard() {
setState(() {
xScore = 0;
oScore = 0;
for (int i = 0; i < 9; i++) {
displayElement[i] = '';
}
});
filledBoxes = 0;
}
Código fuente completo:
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool oTurn = true;
// 1st player is O
List<String> displayElement = ['', '', '', '', '', '', '', '', ''];
int oScore = 0;
int xScore = 0;
int filledBoxes = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[900],
body: Column(
children: <Widget>[
Expanded(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Player X',
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
xScore.toString(),
style: TextStyle(fontSize: 20,color: Colors.white),
),
],
),
),
Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Player O', style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)
),
Text(
oScore.toString(),
style: TextStyle(fontSize: 20,color: Colors.white),
),
],
),
),
],
),
),
),
Expanded(
flex: 4,
child: GridView.builder(
itemCount: 9,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
_tapped(index);
},
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white)),
child: Center(
child: Text(
displayElement[index],
style: TextStyle(color: Colors.white, fontSize: 35),
),
),
),
);
}),
),
Expanded(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.indigo[50],
textColor: Colors.black,
onPressed: _clearScoreBoard,
child: Text("Clear Score Board"),
),
],
),
))
],
),
);
}
void _tapped(int index) {
setState(() {
if (oTurn && displayElement[index] == '') {
displayElement[index] = 'O';
filledBoxes++;
} else if (!oTurn && displayElement[index] == '') {
displayElement[index] = 'X';
filledBoxes++;
}
oTurn = !oTurn;
_checkWinner();
});
}
void _checkWinner() {
// Checking rows
if (displayElement[0] == displayElement[1] &&
displayElement[0] == displayElement[2] &&
displayElement[0] != '') {
_showWinDialog(displayElement[0]);
}
if (displayElement[3] == displayElement[4] &&
displayElement[3] == displayElement[5] &&
displayElement[3] != '') {
_showWinDialog(displayElement[3]);
}
if (displayElement[6] == displayElement[7] &&
displayElement[6] == displayElement[8] &&
displayElement[6] != '') {
_showWinDialog(displayElement[6]);
}
// Checking Column
if (displayElement[0] == displayElement[3] &&
displayElement[0] == displayElement[6] &&
displayElement[0] != '') {
_showWinDialog(displayElement[0]);
}
if (displayElement[1] == displayElement[4] &&
displayElement[1] == displayElement[7] &&
displayElement[1] != '') {
_showWinDialog(displayElement[1]);
}
if (displayElement[2] == displayElement[5] &&
displayElement[2] == displayElement[8] &&
displayElement[2] != '') {
_showWinDialog(displayElement[2]);
}
// Checking Diagonal
if (displayElement[0] == displayElement[4] &&
displayElement[0] == displayElement[8] &&
displayElement[0] != '') {
_showWinDialog(displayElement[0]);
}
if (displayElement[2] == displayElement[4] &&
displayElement[2] == displayElement[6] &&
displayElement[2] != '') {
_showWinDialog(displayElement[2]);
} else if (filledBoxes == 9) {
_showDrawDialog();
}
}
void _showWinDialog(String winner) {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("\" " + winner + " \" is Winner!!!"),
actions: [
FlatButton(
child: Text("Play Again"),
onPressed: () {
_clearBoard();
Navigator.of(context).pop();
},
)
],
);
});
if (winner == 'O') {
oScore++;
} else if (winner == 'X') {
xScore++;
}
}
void _showDrawDialog() {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Draw"),
actions: [
FlatButton(
child: Text("Play Again"),
onPressed: () {
_clearBoard();
Navigator.of(context).pop();
},
)
],
);
});
}
void _clearBoard() {
setState(() {
for (int i = 0; i < 9; i++) {
displayElement[i] = '';
}
});
filledBoxes = 0;
}
void _clearScoreBoard() {
setState(() {
xScore = 0;
oScore = 0;
for (int i = 0; i < 9; i++) {
displayElement[i] = '';
}
});
filledBoxes = 0;
}
}
En Flutter , el archivo main.dart es el punto de entrada desde el cual el código comienza a ejecutarse. En el archivo main.dart, primero se ha importado el paquete de diseño de materiales. Luego se ha creado una función runApp con el parámetro MyApp. Después de la declaración de la clase MyApp, que es un widget sin estado, se ha establecido el estado de la clase MyApp.
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitkhedkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA