Skip to content

lichess-org/flutter-chessground

Repository files navigation

Tests pub package package publisher Discord

Chessground is a chessboard package developed for lichess.org. It doesn't handle chess logic so you can use it with different chess variants.

Features

  • pieces animations: moving and fading away
  • board highlights: last move, piece destinations
  • move piece by tap or drag and drop
  • premoves
  • displays a shadow under dragged piece to indicate the drop square target
  • board themes
  • piece sets from lichess
  • promotion selector
  • draw shapes on board
  • move annotations
  • opponent's pieces can be displayed upside down

Getting started

This package exports a Board widget which can be interactable or not. It is entirely configurable with a BoardSettings object.

Usage

This will display a non-interactable board from the starting position, using the default theme:

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String fen = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR';

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Chessground demo'),
      ),
      body: Center(
        child: Board(
          size: screenWidth,
          data: BoardData(
            interactableSide: InteractableSide.none,
            orientation: Side.white,
            fen: fen,
          ),
        ),
      ),
    );
  }
}

See the example app for:

  • Random Bot: an interactable board for one player playing against a random bot,
  • Free Play: an interactable board for two players sitting opposite to each other,
  • Board Thumbnails: a demo screen showing over hundred different boards in a grid,
  • Draw Shapes: a demo screen where the user can highlight squares and draw arrows on a board.