Dart - 我的游戏中一个按钮的方法的井字游戏示例？

Question

我正在使用 Dart 制作一个井字游戏，需要一些帮助来为我的游戏实现一个按钮。我不太确定如何开始为井字游戏屏幕上的按钮制作方法。我将如何从第一个按钮方法开始？我打算使用void _button0() {}，但由于我是 Dart 新手，所以不知道如何处理第一个。

我还需要为井字游戏的每个按钮制作 9 个单独的方法吗？

import 'package:flutter/material.dart';
import 'dart:math';

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  // Constant Characters for each player
  static const String humanPlayer = '1';
  static const String computerPlayer = '2';

  // Initial Text for Info Label
  String text = "X's Turn";

  // Constant for Board Size
  static const boardSize = 9;

  // Game Variables
  var gameOver = false;
  var win = 0;
  var turn = 0;
  var _mBoard = ["", "", "", "", "", "", "", "", ""];
  var rnd = new Random(boardSize);

  // Button Text Variables?
  

  // Tic Tac Toe Game Code
  void displayBoard() {
    print("");
    print(_mBoard[0] + " | " + _mBoard[1] + " | " + _mBoard[2]);
    print("-----------");
    print(_mBoard[3] + " | " + _mBoard[4] + " | " + _mBoard[5]);
    print("-----------");
    print(_mBoard[6] + " | " + _mBoard[7] + " | " + _mBoard[8]);
    print("");
  }

  void checkGameOver(int win) {
    print("");
    if (win == 1) {
      gameOver = true;
      displayMessage("It's a tie.");
    } else if (win == 2) {
      gameOver = true;
      displayMessage(humanPlayer + " wins!");
    } else if (win == 3) {
      gameOver = true;
      displayMessage(computerPlayer + " wins!");
    } else
      displayMessage("There is a logic Problem!");
  }

  void displayMessage(String text) {
    text = text;
    print(text);
  }

  int checkWinner() {
    // Check horizontal wins
    for (int i = 0; i <= 6; i += 3) {
      if (_mBoard[i] == (humanPlayer) &&
          _mBoard[i + 1] == (humanPlayer) &&
          _mBoard[i + 2] == (humanPlayer)) return 2;

      if (_mBoard[i] == (computerPlayer) &&
          _mBoard[i + 1] == (computerPlayer) &&
          _mBoard[i + 2] == (computerPlayer)) return 3;
    }
    // Check vertical wins
    for (int i = 0; i <= 2; i++) {
      if (_mBoard[i] == (humanPlayer) &&
          _mBoard[i + 3] == (humanPlayer) &&
          _mBoard[i + 6] == (humanPlayer)) return 2;

      if (_mBoard[i] == (computerPlayer) &&
          _mBoard[i + 3] == (computerPlayer) &&
          _mBoard[i + 6] == (computerPlayer)) return 3;
    }
    // Check for diagonal wins
    if ((_mBoard[0] == (humanPlayer) &&
            _mBoard[4] == (humanPlayer) &&
            _mBoard[8] == (humanPlayer)) ||
        (_mBoard[2] == (humanPlayer) &&
            _mBoard[4] == (humanPlayer) &&
            _mBoard[6] == (humanPlayer))) return 2;

    if ((_mBoard[0] == (computerPlayer) &&
            _mBoard[4] == (computerPlayer) &&
            _mBoard[8] == (computerPlayer)) ||
        (_mBoard[2] == (computerPlayer) &&
            _mBoard[4] == (computerPlayer) &&
            _mBoard[6] == (computerPlayer))) return 3;

    for (int i = 0; i < boardSize; i++) {
      // If we find a number, then no one has won yet
      if (!(_mBoard[i] == (humanPlayer)) && !(_mBoard[i] == (computerPlayer)))
        return 0;
    }

    // If we make it through the previous loop, all places are taken, so it's a tie*/
    return 1;
  }

  void getComputerMove() {
    int move;

    // First see if there's a move O can make to win
    for (int i = 0; i < boardSize; i++) {
      if (_mBoard[i] != humanPlayer && _mBoard[i] != computerPlayer) {
        String curr = _mBoard[i];
        _mBoard[i] = computerPlayer;
        if (checkWinner() == 3) {
          print('Computer is moving to ${i + 1}');
          return;
        } else
          _mBoard[i] = curr;
      }
    }

    // See if there's a move O can make to block X from winning
    for (int i = 0; i < boardSize; i++) {
      if (_mBoard[i] != humanPlayer && _mBoard[i] != computerPlayer) {
        String curr = _mBoard[i]; // Save the current number
        _mBoard[i] = humanPlayer;
        if (checkWinner() == 2) {
          _mBoard[i] = computerPlayer;
          print('Computer is moving to ${i + 1}');
          return;
        } else
          _mBoard[i] = curr;
      }
    }
    // Generate random move
    do {
      move = rnd.nextInt(boardSize);
    } while (_mBoard[move] == humanPlayer || _mBoard[move] == computerPlayer);

    print('Computer is moving to ${move + 1}');

    _mBoard[move] = computerPlayer;
  }

  void _button0() {
   
  }
//=====è

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Tic Tac Toe'),
            leading: IconButton(
              icon: Icon(
                Icons.border_all,
                semanticLabel: 'menu',
              ),
              onPressed: () {},
            ),
            actions: <Widget>[
              new IconButton(
                icon: new Icon(Icons.new_releases),
                onPressed: () {},
                tooltip: 'New Game',
              ),
              IconButton(
                icon: new Icon(Icons.refresh),
                onPressed: () {},
                tooltip: 'Quit Game',
              ),
              PopupMenuButton(itemBuilder: (BuildContext context) {
                return [
                  PopupMenuItem(
                    child: new GestureDetector(
                      onTap: () {},
                      child: new Text("About",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          )),
                    ),
                  ),
                  PopupMenuItem(
                    child: new GestureDetector(
                      onTap: () {
                        // Some Method
                      },
                      child: new Text(
                        "Settings",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ];
              })
            ]),
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ///
        ///
        ///
        body: Center(
            child:
                Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
                height: 100,
                width: 100,
                margin: const EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {

                  },
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 80.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Roboto',
                    ),
                  ),
                )),
            Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {

                  },
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.bold,
                        fontFamily: "Roboto"),
                  ),
                )),
            Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.bold,
                        fontFamily: "Roboto"),
                  ),
                )),
          ]),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
                height: 100,
                width: 100,
                margin: const EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 80.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Roboto',
                    ),
                  ),
                )),
            Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.bold,
                        fontFamily: "Roboto"),
                  ),
                )),
            Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.bold,
                        fontFamily: "Roboto"),
                  ),
                )),
          ]),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
                height: 100,
                width: 100,
                margin: const EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 80.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Roboto',
                    ),
                  ),
                )),
            Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.bold,
                        fontFamily: "Roboto"),
                  ),
                )),
            Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10.0),
                child: RaisedButton(
                  padding: const EdgeInsets.all(10.0),
                  onPressed: () {},
                  child: Text(
                    "",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.bold,
                        fontFamily: "Roboto"),
                  ),
                )),
          ]),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 100,
                width: 300,
                margin: const EdgeInsets.all(10.0),
                child: Text(
                  "X's Turn",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Roboto',
                  ),
                ),
              )
            ],
          ),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
                height: 40,
                width: 200,
                margin: const EdgeInsets.all(10.0),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text(
                    "Reset App",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Roboto',
                    ),
                  ),
                ))
          ]),
        ])));
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
可以参考https://github.com/sbvkrishna/tictactoe-flutter
第 1 步：您可以使用 GridView.count 创建 9 个 Box(Button) 并将 index 传递给 Box(Button) 小部件

GridView.count(
          primary: false,
          crossAxisCount: 3,
          children: List.generate(9, (index) {
            return Box(index);
          }),

第 2 步：您可以将 Button 逻辑放入 onPressed 中，并将每个 Button 标识为 widget.index

class _BoxState extends State<Box> {
  ...

  @override
  Widget build(context) {
    return MaterialButton(
        padding: EdgeInsets.all(0),
        child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                border: new Border.all(color: Colors.blue)),
            child: Center(
              child: Text(
                _board[widget.index].toUpperCase(),
                style: TextStyle(
                  fontSize: 45,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )),
        onPressed: () {
          if (_board[widget.index] == '') {
            if (vsBot == false) {
              if (currentMoves % 2 == 0)
                _board[widget.index] = 'x';
              else
                _board[widget.index] = 'o';
            } else if (!loading) {
              loading = true;
              _board[widget.index] = 'o';
              if (currentMoves >= 8) {
              } else
                _bestMove(_board);
              //print(_board);
            }
            //print(vsBot);
            pressed();
          }
        });

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'dart:async';
import 'package:flutter/gestures.dart';
import 'package:url_launcher/url_launcher.dart';

class About extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("About Me"),
        ),
        body: aboutBody);
  }
}

Widget get aboutBody {
  return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [const Color(0xFFB3E5FC), const Color(0xFF2196F3)])),
      padding: EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          RichText(
            text: TextSpan(children: [
              TextSpan(
                text: 'A Simple TicTacToe game made using ',
                style: TextStyle(color: Colors.black, fontSize: 20),
              ),
              TextSpan(
                  text: 'Flutter',
                  style: TextStyle(color: Colors.blue[900], fontSize: 20),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      launch('https://flutter.dev');
                    })
            ]),
          ),
          Container(
            height: 150,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text(
                  'Developed by Krishna S',
                  style: TextStyle(fontSize: 20),
                ),
                Row(
                  children: <Widget>[
                    Icon(Icons.code),
                    InkWell(
                      child: Text(
                        '  Github: sbvkrishna',
                        style: TextStyle(fontSize: 20, color: Colors.blue[900]),
                      ),
                      onTap: () => {launch('https://github.com/sbvkrishna')},
                    )
                  ],
                ),
                Row(
                  children: <Widget>[
                    Icon(Icons.email),
                    Text(
                      '  saladibalavijayakrishna@gmail.com',
                      style: TextStyle(fontSize: 18),
                    ),
                  ],
                ),
                Text(''),
                RichText(
                  text: TextSpan(children: [
                    TextSpan(
                      text: 'This Game\'s Source code is available at ',
                      style: TextStyle(color: Colors.black, fontSize: 20),
                    ),
                    TextSpan(
                        text: 'Github',
                        style: TextStyle(color: Colors.blue[900], fontSize: 20),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            launch(
                                'https://github.com/sbvkrishna/tictactoe-flutter');
                          })
                  ]),
                ),
              ],
            ),
          )
        ],
      ));
}

int currentMoves = 0;
List<String> _board = ['', '', '', '', '', '', '', '', '']; //empty board
String status = '';
String winner = '';
var _gamePageState;
var _turnState;
var _context;
String _turn = 'First Move: X';
bool loading = false;
bool vsBot;

class GamePage extends StatefulWidget {
  bool isBot;
  GamePage(this.isBot) {
    _resetGame();
    vsBot = this.isBot;
    if (vsBot) _turn = 'First Move: O';
  }
  @override
  _GamePageState createState() => _GamePageState();
}

class _GamePageState extends State<GamePage> {
  @override
  Widget build(BuildContext context) {
    _gamePageState = this;
    return Scaffold(
      appBar: AppBar(
        //leading: Container(width: 0,height: 0,),
        title: Text(vsBot ? 'Playing vs Bot' : 'Playing vs Friend'),
        actions: <Widget>[
          // IconButton(
          //   icon: Icon(Icons.settings_brightness),
          //   tooltip: 'Change Theme',
          //   onPressed: () {
          //   },
          // ),
          IconButton(
            icon: Icon(Icons.info),
            tooltip: 'About',
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return About();
              }));
            },
          ),
        ],
      ),
      body: Container(
        decoration: BoxDecoration(color: Colors.blue[200]),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[_BoxContainer(), Status()],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            awaitfn('Reset?', 'Want to reset the current game?', 'Go Back',
                'Reset');
          });
        },
        tooltip: 'Restart',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

class _BoxContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    _context = context;
    return Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
            color: Colors.white,
            border: new Border.all(color: Colors.blue),
            boxShadow: [
              BoxShadow(
                  color: Colors.blue[100],
                  blurRadius: 20.0,
                  spreadRadius: 5.0,
                  offset: Offset(7.0, 7.0))
            ]),
        child: Center(
            child: GridView.count(
          primary: false,
          crossAxisCount: 3,
          children: List.generate(9, (index) {
            return Box(index);
          }),
        )));
  }
}

class Box extends StatefulWidget {
  final int index;
  Box(this.index);
  @override
  _BoxState createState() => _BoxState();
}

class _BoxState extends State<Box> {
  void pressed() {
    print(currentMoves);
    setState(() {
      currentMoves++;
      if (_checkGame()) {
        awaitfnn();
      } else if (currentMoves >= 9) {
        awaitfn('It\'s a Draw', 'Want to try again?', 'Go Back', 'New Game');
      }
      _turnState.setState(() {
        if (currentMoves % 2 == 0)
          _turn = 'Turn: O';
        else
          _turn = 'Turn: X';
        _gamePageState.setState(() {});
      });
    });
  }

  @override
  Widget build(context) {
    return MaterialButton(
        padding: EdgeInsets.all(0),
        child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                border: new Border.all(color: Colors.blue)),
            child: Center(
              child: Text(
                _board[widget.index].toUpperCase(),
                style: TextStyle(
                  fontSize: 45,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )),
        onPressed: () {
          if (_board[widget.index] == '') {
            if (vsBot == false) {
              if (currentMoves % 2 == 0)
                _board[widget.index] = 'x';
              else
                _board[widget.index] = 'o';
            } else if (!loading) {
              loading = true;
              _board[widget.index] = 'o';
              if (currentMoves >= 8) {
              } else
                _bestMove(_board);
              //print(_board);
            }
            //print(vsBot);
            pressed();
          }
        });
  }
}

class Status extends StatefulWidget {
  @override
  _StatusState createState() => _StatusState();
}

class _StatusState extends State<Status> {
  @override
  Widget build(BuildContext context) {
    _turnState = this;
    return Card(
        margin: EdgeInsets.all(40),
        child: Container(
          width: 220,
          height: 60,
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: Text(
            _turn,
            style: TextStyle(fontSize: 30),
            textAlign: TextAlign.center,
          ),
        ));
  }
}

//-------------------------------------TicTacToe game fns ---------------------------

bool _checkGame() {
  for (int i = 0; i < 9; i += 3) {
    if (_board[i] != '' &&
        _board[i] == _board[i + 1] &&
        _board[i + 1] == _board[i + 2]) {
      winner = _board[i];
      return true;
    }
  }
  for (int i = 0; i < 3; i++) {
    if (_board[i] != '' &&
        _board[i] == _board[i + 3] &&
        _board[i + 3] == _board[i + 6]) {
      winner = _board[i];
      return true;
    }
  }
  if (_board[0] != '' && (_board[0] == _board[4] && _board[4] == _board[8]) ||
      (_board[2] != '' && _board[2] == _board[4] && _board[4] == _board[6])) {
    winner = _board[4];
    return true;
  }
  return false;
}

void _resetGame() {
  currentMoves = 0;
  status = '';
  _board = ['', '', '', '', '', '', '', '', ''];
  _turn = 'First Move: X';
  loading = false;
}
//------------------------------ Alerts Dialog --------------------------------------

void awaitfnn() async {
  bool result = await _showAlertBox(
      _context, '$winner won!', 'Start a new Game?', 'Exit', 'New Game');
  if (result) {
    _gamePageState.setState(() {
      _resetGame();
    });
  } else {
    SystemChannels.platform.invokeMethod('SystemNavigator.pop');
  }
}

Future<bool> _showAlertBox(BuildContext context, String title, String content,
    String btn1, String btn2) async {
  return showDialog<bool>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext _context) => AlertDialog(
            title: Text(title.toUpperCase()),
            content: Text(content),
            actions: <Widget>[
              RaisedButton(
                color: Colors.white,
                child: Text(btn1),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
              RaisedButton(
                color: Colors.white,
                child: Text(btn2),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              )
            ],
          ));
}

awaitfn(String title, String content, String btn1, String btn2) async {
  bool result = await _showAlertBox(_context, title, content, btn1, btn2);
  if (result) {
    _gamePageState.setState(() {
      _resetGame();
    });
  }
}

//------------------------------ MIN-MAX ------------------------------------------

int max(int a, int b) {
  return a > b ? a : b;
}

int min(int a, int b) {
  return a < b ? a : b;
}

String player = 'x', opponent = 'o';

bool isMovesLeft(List<String> _board) {
  int i;
  for (i = 0; i < 9; i++) {
    if (_board[i] == '') return true;
  }
  return false;
}

int _eval(List<String> _board) {
  for (int i = 0; i < 9; i += 3) {
    if (_board[i] != '' &&
        _board[i] == _board[i + 1] &&
        _board[i + 1] == _board[i + 2]) {
      winner = _board[i];
      return (winner == player) ? 10 : -10;
    }
  }
  for (int i = 0; i < 3; i++) {
    if (_board[i] != '' &&
        _board[i] == _board[i + 3] &&
        _board[i + 3] == _board[i + 6]) {
      winner = _board[i];
      return (winner == player) ? 10 : -10;
    }
  }
  if (_board[0] != '' && (_board[0] == _board[4] && _board[4] == _board[8]) ||
      (_board[2] != '' && _board[2] == _board[4] && _board[4] == _board[6])) {
    winner = _board[4];
    return (winner == player) ? 10 : -10;
  }
  return 0;
}

int minmax(List<String> _board, int depth, bool isMax) {
  int score = _eval(_board);
  //print(score);
  int best = 0, i;

  if (score == 10 || score == -10) return score;
  if (!isMovesLeft(_board)) return 0;
  if (isMax) {
    best = -1000;
    for (i = 0; i < 9; i++) {
      if (_board[i] == '') {
        _board[i] = player;
        best = max(best, minmax(_board, depth + 1, !isMax));
        _board[i] = '';
      }
    }
    return best;
  } else {
    best = 1000;
    for (i = 0; i < 9; i++) {
      if (_board[i] == '') {
        _board[i] = opponent;
        best = min(best, minmax(_board, depth + 1, !isMax));
        _board[i] = '';
      }
    }
    //print(best);
    return best;
  }
}

int _bestMove(List<String> _board) {
  int bestMove = -1000, moveVal;
  int i, bi;
  for (i = 0; i < 9; i++) {
    if (_board[i] == '') {
      moveVal = -1000;
      _board[i] = player;
      moveVal = minmax(_board, 0, false);
      _board[i] = '';
      if (moveVal > bestMove) {
        bestMove = moveVal;
        bi = i;
      }
    }
  }
  _board[bi] = player;
  _gamePageState.setState(() {});
  loading = false;
  _turnState.setState(() {
    _turn = 'Turn: X';
    currentMoves++;
  });
  return bestMove;
}

//---------------------------------------- API ----------------------------------

// Future gameAPI() async {
//   var url = 'http://perfecttictactoe.herokuapp.com/api/v2/play';
//   Map data = {
//     "player_piece": "o",
//     "opponent_piece": "x",
//     "board": [
//       {"id": "top-left", "value": _board[0]},
//       {"id": "top-center", "value": _board[1]},
//       {"id": "top-right", "value": _board[2]},
//       {"id": "middle-left", "value": _board[3]},
//       {"id": "middle-center", "value": _board[4]},
//       {"id": "middle-right", "value": _board[5]},
//       {"id": "bottom-left", "value": _board[6]},
//       {"id": "bottom-center", "value": _board[7]},
//       {"id": "bottom-right", "value": _board[8]}
//     ]
//   };
//   var res = await http.post(url, body: json.encode(data));
//   if (res.statusCode == 200) {
//     var resBody = json.decode(res.body);
//     if (resBody['status'] == 'success') {
//       var newBoard = resBody['data'];
//       if (newBoard['status'] == 'win') {
//         winner = newBoard['winner'];
//         awaitfnn();
//       } else if (newBoard['status'] == 'draw') {
//         awaitfn('It"s a Draw', 'Want to try again?', 'Go Back', 'New Game');
//       }
//       int i = 0;
//       newBoard['board'].forEach((box) => {_board[i++] = box['value']});
//     }
//     _gamePageState.setState(() {});
//     loading = false;
//     _turnState.setState(() {
//       _turn = 'Turn: X';
//       currentMoves++;
//     });
//   }
// }

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TicTacToe"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.info),
            tooltip: 'About',
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return About();
              }));
            },
          ),
        ],
      ),
      body: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [const Color(0xFFB3E5FC), const Color(0xFF2196F3)])),
          padding: EdgeInsets.all(5),
          child: Column(
            children: <Widget>[
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.close,
                      size: 140,
                      color: Colors.lightBlue[800],
                    ),
                    Icon(
                      Icons.radio_button_unchecked,
                      size: 108,
                      color: Colors.lightBlue[800],
                    )
                  ],
                ),
              ),
              Center(
                child: Container(
                  width: 310,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      RaisedButton(
                        padding: EdgeInsets.fromLTRB(10, 5, 10, 6),
                        child: Container(
                            width: 130,
                            child: Center(
                              child: Text(
                                'vs Bot',
                                style: TextStyle(
                                    color: Colors.lightBlue[800], fontSize: 30),
                              ),
                            )),
                        onPressed: () {
                          Navigator.of(context)
                              .push(MaterialPageRoute(builder: (context) {
                            return GamePage(true);
                          }));
                        },
                      ),
                      RaisedButton(
                        padding: EdgeInsets.fromLTRB(10, 5, 10, 6),
                        child: Container(
                            width: 130,
                            child: Center(
                              child: Text(
                                'vs Friend',
                                style: TextStyle(
                                    color: Colors.lightBlue[800], fontSize: 30),
                              ),
                            )),
                        onPressed: () {
                          Navigator.of(context)
                              .push(MaterialPageRoute(builder: (context) {
                            return GamePage(false);
                          }));
                        },
                      ),
                    ],
                  ),
                ),
              )
            ],
          )),
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TicTacToe',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
        //fontFamily: ''
      ),
      home: HomePage(),
    );
  }
}