flutter_jigsaw_puzzle

Geneate a jigsaw puzzle of any size from a ImageProvider.

5x5.mp4

Features

• Create a jigsaw puzzle from any ImageProvider
• Configurable grid size (2x2, 3x3, 4x4, 5x5, 6x6, ...)
• Separate callbacks for when each block gets snapped and for when the puzzle is completed

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_jigsaw_puzzle: <latest_version>

In your library add the following import:

import 'package:flutter_jigsaw_puzzle/flutter_jigsaw_puzzle.dart';

For help getting started with Flutter, view the online documentation.

Example

3x3

3x3.mp4

5x5

5x5.mp4

10x10

10x10.mp4

final puzzleKey = GlobalKey<JigsawWidgetState>();

Column(
  children: [
    ElevatedButton(
      onPressed: () async {
        await puzzleKey.currentState.generate();
      },
      child: const Text('Generate'),
    ),
    JigsawPuzzle(
      gridSize: 10,
      image: const AssetImage('assets/Jigsaw.jpg'),
      onFinished: () {
        // ignore: avoid_print
        print('finished!');
      },
      snapSensitivity: .5, // Between 0 and 1
      puzzleKey: puzzleKey,
      onBlockSuccess: () {
        // ignore: avoid_print
        print('block success!');
      },
    )
  ],
),

You can find a working example in the Example project.

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.

TODO

• Tests
• Animations