Building a Matching Game using Flutter

About a month ago I started my job as a trainee and my first task was to build a flutter app with my own preference which includes new ideas and something interesting.so I came up with the idea of building something for kids. With the help of my mentor I decided to create a simple gaming app which will help kids to improve their memory,concentration,attention to details and more.

So the idea was to build a matching game which will probably best for 2–3 year old ,but older or younger kids may enjoy it, too.

You may have heard the word “Flutter” by now.Flutter is Google’s portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single code base. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

If you’re new to flutter you can follow this link https://flutter.dev/?gclid=CjwKCAiAyc2BBhAaEiwA44wW5unel_dmlR4SCSiYoYz4fvOMOS6EEfB1TTf25srAmq8XMziXU3OhRoCeR4QAvD_BwE&gclsrc=aw.ds

Flutter provides variety of widgets which will help to create any kind of UI. So in this app it will be more than a UI that provide the user to access it.The basic thing you need to know when creating a matching game is Draggable and Drag target.

Lets start creating our flutter app…

I’m using VS code editor and you can use either android studio or VS code to create the app.Hope you have set up the environment for flutter and necessary extensions.

Creating a new project

1. Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
2. Select the Flutter: New Project command and press Enter.
3. Enter your desired Project name.
4. Select a Project location.

After creating our flutter project we can continue to work on our application.As I mentioned before we need to know about draggable and drag target in flutter.Basically in a matching game user must be able to drag a picture and the matched picture should accept the dragged picture if its correct.A widget will be movable around the screen with the help of Draggable. While the draggable allows a widget to be dragged anywhere the Drag Target will provide a destination to the draggable.(you can get a good idea about draggable and drag target using the above mentioned link)

you can use a set of images to the draggable and the matching images as the drag target.

You can add data directly to the source code,load json data or load the data from cloud firestore using firebase. To add firebase to your project you can follow this link https://firebase.google.com/docs/flutter/setup.

I have used cloud firestore to load images and other data to the project.For the background image loading I have used firebase storage.

Now we can create the draggable and drag target data list inside our project and load the firebase data. Simply what happens is that the draggable image will hold a data name and the drag target will check whether the accepted data is correct and will set the state to true or will return the image if the data name is wrong. Additionally I have added something interesting to the game here.When the user get a correct answer which means the accepted data is true marks will be added to the correct match.

You won’t get tired by playing a one match.so we can add more matches to continue.After finishing a game there will be a small dialog box to continue the next game.If the user wants to go to the next game they can simply click the OK button and the data for the next game will be automatically load to the screen.

Lets see how that happens.

This part was difficult so I had to get help from my mentor to implement it.Here we have used ChangeNotifierProvider to render a match.According to the flutter docs changeNotifier is a simple class included in the Flutter SDK which provides change notification to its listeners.when the change notifier gets updated values, it can call a method called ‘notifyListeners()’, and then any of it’s listeners will respond with an action.

Now we can add more reaction to our app to make it look more interesting.For that I have added a GIF for every correct answer.And we can add a push up notification to remind the user to play a game.We can use cloud messaging for that.

As the final touch up we can change our app launcher icon.You can change the launcher icon by following below steps.

1. Add your png file to the asset folder
2. Edit pubspec.yaml

1. Run the following commands

If you have followed the above steps you can see your icon has been changed to the one you wanted instead of the flutter icon.

If you’re planing to publish your app to the play store you have two possible formats to release.you can either build a release app bundle or build an APK.(APK stands for Android Package Kit and is the file format that Android uses to distribute and install apps)

I have build and APK and following commands will build it.

In your terminal,

1. flutter clean
2. flutter build apk

Now you can place the APK file on your device to install the app.

Hope you have enjoyed this article and learned something.

You can get the full source code from here : https://github.com/House-Of-Coders/trainee_play_room