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

o-compilador/flutter_jigsaw_puzzle