How to make a Simple maze game in Flutter

Flutter maze game

Flutter maze game is a great plugin developed by Pablo Bautista. With this plugin, you can quickly generate a Simple maze game in your app. The usage is very simple too. It uses only a few elements. You need to install the plugin by adding it to dependencies in your pubspec.yaml file and then import it into the project.

dependencies:
  flutter:
    sdk: flutter
  maze: 3.0.0

import 'package:maze/maze.dart';

And here we have a basic working code. The explanation of the code is below too.

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

void main() => runApp(MazeApp());

class MazeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Maze Demo',
        theme: ThemeData(
            primarySwatch: Colors.orange,
            scaffoldBackgroundColor: Colors.blueGrey),
        home: MazeScreen());
  }
}

class MazeScreen extends StatefulWidget {
  @override
  _MazeScreenState createState() => _MazeScreenState();
}

class _MazeScreenState extends State<MazeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Maze(
                player: MazeItem(
                    'assets/gem_blue.png',
                    ImageType.asset
                ),
                columns: 6,
                rows: 12,
                wallThickness: 4.0,
                wallColor: Theme.of(context).primaryColor,
                finish: MazeItem(
                    'assets/gem_red.png',
                    ImageType.asset
                ),
                onFinish: () => print('Hi from finish line!'))));
  }
}

As you can see the code is simple. It uses two images from your assets directory. If you do not have that folder you can create it now and paste your new images. Then you need to add your assets to your pubspec.ymal.

assets:
  - assets/

It is worth mentioning that the example code from the project page doesn’t work because it uses network images ImageType.network, but the images are not available anymore.

So, what options do we have here? You can change the size and complexity and colours of the maze by changing only a few values. What you can change:

columns
rows
wallThickness
wallColor
player
finish
onFinish

columns and rows are integer values and represent the size and complexity of the maze.
wallThicknes is a double value and as the name says it changes the thickness of the walls.
wallColor is a simple colour of the walls.
player and finish use the images of the player figure and the finished point.
onFinish in the example just prints the short sentence but can be replaced and the function can be called

What is interesting this game required only two images. The presented example uses images from www.flaticon.com. You can use any images saved in your project assets folder.

//change
onFinish: () => print('Hi from finish line!')

//to
onFinish: () => Finished()

  Finished(){
    print('Hi from finish line!');
  }

What can you do more?

You can build a screen with levels.
Definitely, there should be added an AlertDialog and redirect you to the next maze or back to the levels page when we finished the game.
If you want this to be more challenging you can add the timer and the game score.
You can also add more levels. For example, each level might be more advanced and complex.

Below you can find a screenshot of the maze game screen from the original project page.