chessboard_js 0.0.2+5

A chessboard widget to use with chessjs. Use chessjs for the logic of the game, and this package to display the game.

example/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:chessboard_js/chessboard_js.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

/// This example shows how to use the chessboard widget.
/// The property [isUserWhite] is set to false, so only
/// black can move, so to play with white we can pass the
/// move to the controller using the textfield input. The
/// [enableKeyboard] property is set to true so, the game
/// can also be iterated with the right/left arrow keyboards

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChessGame(),
    );
  }
}

/// to enter a move, and make it programmatically
final textProvider = StateProvider((ref) => '');

/// there are better ways to set the result this*
final resultProvider = StateProvider<bool?>((ref) => null);

class ChessGame extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ChessboardController controller = ChessboardController(
        white: 'SomeNameForWhite',
        black: 'SomeLONGGGGGGGGGGGGNameForBlack',
        whiteSideTowardUser: false,
        isUserWhite: null,

        /// set to true/false to allow moves only for color of current user
        onMove: (move) {
          print('move: $move');
        },
        enableKeyboard: true,
        onResign: (result) {
          /// lets suppose user is always white, so white resigns
          context.read(resultProvider).state = result;
        });

    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus!
          .focusInDirection(TraversalDirection.down),
      child: Scaffold(
        backgroundColor: Colors.black,
        body: SizedBox.expand(
          child: Theme(
            data: ThemeData.dark(),
            child: Container(
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  /// uncomment to move programmatically
//                  Column(
//                    mainAxisSize: MainAxisSize.min,
//                    children: [
//                      Container(
//                        width: 150,
//                        child: TextField(
//                          autofocus: false,
//                          onChanged: (str) {
//                            context.read(textProvider).state = str;
//                          },
//                          decoration:
//                              InputDecoration.collapsed(hintText: 'move'),
//                        ),
//                      ),
//                      Container(
//                        width: 150,
//                        child: TextButton(
//                            onPressed: () {
//                              controller.makeSanMove(
//                                  context.read(textProvider).state);
//                            },
//                            child: Text('move!')),
//                      )
//                    ],
//                  ),
                  ProviderListener<StateController<bool?>>(
                    onChange: (BuildContext context, value) {
                      if (value.state != null) if (value.state!) {
                        showDialog(
                            context: context,
                            builder: (context) => AlertDialog(
                                  title: Text('White Lost'),
                                ));
                        controller.setResult('White Lost');
                      }
                    },
                    provider: resultProvider,
                    child: ChessBoard(
                      initialSize: 500,
                      minSize: 300,
                      controller: controller,
                      showNotationPanel: true,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}