Flutterでチェスアプリを開発するチュートリアル

はじめに

今回の記事では、Flutterで簡単なチェスアプリを開発する手順を簡潔に解説する。作り方は非常に簡単で、15分さえあれば誰でも簡単に作れるのでオススメ。公式サイトのコピペで動くので非常に簡単。

main.dartファイルのみで完結するので複雑な状態管理やUI設計は必要ない。

インストール

まずは以下のコマンドを叩く

\> flutter create <project-name> # ちなみに本プロジェクトではchessapp
\> cd <project-name>
\> flutter pub add flutter_chess_board

サンプル

とりあえず以下のプログラムをlib/main.dartへコピペしよう。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ChessBoardController controller = ChessBoardController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chess Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: ChessBoard(
                controller: controller,
                // 盤面の色
                boardColor: BoardColor.orange,
                // 盤面に矢印が表示される。メカニズムの仕組みを理解するにはチェスの基本的な知識が必要
                arrows: [
                  BoardArrow(
                    from: 'd2',
                    to: 'd4',
                    //color: Colors.red.withOpacity(0.5),
                  ),
                  BoardArrow(
                    from: 'e7',
                    to: 'e5',
                    color: Colors.red.withOpacity(0.7),
                  ),
                ],
                // プレイヤーの色をここで表示する
                boardOrientation: PlayerColor.white,
              ),
            ),
          ),
          Expanded(
            child: ValueListenableBuilder<Chess>(
              valueListenable: controller,
              builder: (context, game, _) {
                return Text(
                  controller.getSan().fold(
                        '',
                        (previousValue, element) =>
                            '${previousValue} \n' + (element ?? ''),
                      ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

あとは以下のコマンドを実行するだけ。

\> flutter run

完成画面は以下の通り。実際に動かせる。ちなみに、動かすときは盤面の下に棋譜が表示される。

あと、盤面の色を替えられる。やり方は簡単で、boardColorのプロパティを変更するだけだ。

boardColor: BoardColor.green

おわりに

今回の記事では、Flutterで簡単なチェスアプリを開発する方法を簡潔に解説した。Flutter開発で息抜きをしたい人は是非やってみてほしい。

パッケージだけで簡単なアプリを開発できるFlutterの凄さに気づくはずだ。

上記のチェスアプリのGitHubリポジトリは以下を参照。

https://github.com/shota-nukumizu/flutter-sample-chess

開発環境

• Windows 11
• Visual Studio Code 1.71
• flutter_chess_board 1.0.1 - dart package
• dart 2.18
• Google Chrome