Simple match game for children using Flutter
3 min readMay 30, 2021
Drag and Drop Game
Hello students, in this tutorial I will show you how we can build a simple flutter game
You must watch entire the Lesson on youtube to understand every step
First, of all, we have to create a file named itemModel
and inside it write this code to create our model like this:
class ItemModel {
final String name;
final String img;
final String value;
bool accepting;
ItemModel({this.name, this.value, this.img, this.accepting = false});
}download the assets folder and add it to your project from this link :
https://drive.google.com/drive/folders/1F-9lJNbdltzTvuOuY-9jVAee_rrZseHG?usp=sharing
Now add this dependency to pubspec.yaml file :
audioplayers: ^0.19.0Great we are ready now to build the homeScreen like this :
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:matchgame/itemModel.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
var player = AudioCache();
List<ItemModel> items;
List<ItemModel> items2;
int score;
bool gameOver;
initGame() {
gameOver = false;
score = 0;
items = [
ItemModel(value: 'lion', name: 'Lion', img: 'assets/lion.png'),
ItemModel(value: 'panda', name: 'Panda', img: 'assets/panda.png'),
ItemModel(value: 'camel', name: 'Camel', img: 'assets/camel.png'),
ItemModel(value: 'dog', name: 'Dog', img: 'assets/dog.png'),
ItemModel(value: 'cat', name: 'Cat', img: 'assets/cat.png'),
ItemModel(value: 'horse', name: 'Horse', img: 'assets/horse.png'),
ItemModel(value: 'sheep', name: 'Sheep', img: 'assets/sheep.png'),
ItemModel(value: 'hen', name: 'Hen', img: 'assets/hen.png'),
ItemModel(value: 'fox', name: 'Fox', img: 'assets/fox.png'),
ItemModel(value: 'cow', name: 'Cow', img: 'assets/cow.png'),
];
items2 = List<ItemModel>.from(items);
items.shuffle();
items2.shuffle();
}
@override
void initState() {
super.initState();
initGame();
}
@override
Widget build(BuildContext context) {
if (items.length == 0) gameOver = true;
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: 'Score: ',
style: Theme.of(context).textTheme.subtitle1,
),
TextSpan(
text: '$score',
style: Theme.of(context)
.textTheme
.headline2
.copyWith(color: Colors.teal),
),
],
),
),
),
if (!gameOver)
Row(
children: [
Spacer(),
Column(
children: items.map((item) {
return Container(
margin: EdgeInsets.all(8),
child: Draggable<ItemModel>(
data: item,
childWhenDragging: CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: AssetImage(item.img),
radius: 50,
),
feedback: CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: AssetImage(item.img),
radius: 30,
),
child: CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: AssetImage(item.img),
radius: 30,
),
),
);
}).toList(),
),
Spacer(flex: 2),
Column(
children: items2.map((item) {
return DragTarget<ItemModel>(
onAccept: (receivedItem) {
if (item.value == receivedItem.value) {
setState(() {
items.remove(receivedItem);
items2.remove(item);
});
score += 10;
item.accepting = false;
player.play('true.wav');
} else {
setState(() {
score -= 5;
item.accepting = false;
player.play('false.wav');
});
}
},
onWillAccept: (receivedItem) {
setState(() {
item.accepting = true;
});
return true;
},
onLeave: (receivedItem) {
setState(() {
item.accepting = false;
});
},
builder: (context, acceptedItems, rejectedItems) =>
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: item.accepting
? Colors.grey[400]
: Colors.grey[200],
),
alignment: Alignment.center,
height:
MediaQuery.of(context).size.width / 6.5,
width: MediaQuery.of(context).size.width / 3,
margin: EdgeInsets.all(8),
child: Text(
item.name,
style:
Theme.of(context).textTheme.headline6,
)),
);
}).toList(),
),
Spacer(),
],
),
if (gameOver)
Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Game Over',
style: Theme.of(context).textTheme.headline6.copyWith(
fontWeight: FontWeight.bold, color: Colors.red),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
result(),
style: Theme.of(context).textTheme.headline3,
),
),
],
),
),
if (gameOver)
Container(
height: MediaQuery.of(context).size.width / 10,
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(8)),
child: TextButton(
onPressed: () {
setState(() {
initGame();
});
},
child: Text(
'New Game',
style: TextStyle(color: Colors.white),
)),
)
],
),
),
),
);
}
//Functions:
String result() {
if (score == 100) {
player.play('success.wav');
return 'Awesome!';
} else {
player.play('tryAgain.wav');
return 'Play again to get better score';
}
}
}The main file should be like this :
again you must watch entire the Lesson on youtube to understand every step
and that’s it awesome so you had built your first game using flutter
