6/recent/ticker-posts

Word Puzzle Game Using Flutter

Introducing the “Alphabet Puzzle” Game: A Fun Way to Test Your Alphabet Knowledge!

In the world of interactive games, educational experiences that combine learning with entertainment are highly sought after. The “Alphabet Puzzle” game is one such example, designed to engage players while challenging their knowledge of alphabets and problem-solving abilities. In this blog post, we will explore the concept of the game and take a closer look at the code implementation using the popular Flutter framework.

Overview :

The “Alphabet Puzzle” game is all about solving puzzles related to alphabets and images. Players are presented with a series of questions and corresponding images, and their task is to rearrange draggable alphabet tiles to form the correct answer. Let’s dive into the key features and code implementation of the game.

Code Implementation using Flutter:

The “Alphabet Puzzle” game is developed using the Flutter framework, which provides a powerful set of tools for building cross-platform mobile applications. Let’s take a closer look at the code implementation:

Step 1: Define the List of Questions

List<String> questions = [
  
"What is the name of this game?",
  
"What is this animal?",
  
"What is the name of this animal?",
];

Step 2: Define the List of Answers

dartCopy codeList<String> answers = [  "mario",  "cat",  "wolf",];

Step 3: Define the List of Images

List<String> imageUrls = [
  
"https://images.pexels.com/photos/163077/mario-yoschi-figures-funny-163077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  
"https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  
"https://as1.ftcdn.net/v2/jpg/02/48/64/04/1000_F_248640483_5KAZi0GqcWrBu6GOhFEAxk1quNEuOzHJ.jpg",
];

Step 4: Implement Alphabet Generate Method

void generateAlphabetOptions() {
  alphabet = answers[currentPuzzle].split(
'');
  alphabet.shuffle();
  userAnswers = List.filled(answers[currentPuzzle].length, 
'');
}

Step 5: Implement the checking Answer Method

void checkAnswer() {
  
if (userAnswers.join('') == answers[currentPuzzle]) {
    
// Correct answer dialog
  
else {
    
// Incorrect answer dialog
  }
}

Step 6: Initialize State Variables and Animation Controller

int currentPuzzle = 0;
List<String> alphabet = [];
List<String> userAnswers = [];
AnimationController _animationController;
Animation<
double> _animation;

Step 7: Implement initState Method

@override
void initState() {
  super
.initState();
  
generateAlphabetOptions();

_animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 500),
  );
  _animation = Tween<double>(begin: 0, end: 1).animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ),
  );
}

 

 

Step 8: Implement dispose Method

@override
void dispose() {
  _animationController
.dispose();
  super
.dispose();
}

Step 9: Implement the Widget Build Hierarchy

@override
Widget 
build(BuildContext context) {
  
return Scaffold(
    
appBarAppBar(
      
titleText('Alphabet Puzzle'),
    ),
    
bodyContainer(
      
decorationBoxDecoration(
        
color: Colors.grey[400],
      ),
      
childColumn(
        
mainAxisAlignment: MainAxisAlignment.center,
        
children: [
          
Padding(
            
padding: const EdgeInsets.all(16.0),
            
childCard(
              
elevation4,
              
shapeRoundedRectangleBorder(
                
borderRadius: BorderRadius.circular(16.0),
              ),
              
childPadding(
                
padding: const EdgeInsets.all(16.0),
                
childColumn(
                  
crossAxisAlignment: CrossAxisAlignment.stretch,
                  
children: [
                    
// Widget hierarchy continues...
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

Code :

wordSearchPuzzel.dart

import 'package:flutter/material.dart';
class AlphabetPuzzle extends StatefulWidget {
  
const AlphabetPuzzle({Key? key}) : super(key: key);
  @override
  _AlphabetPuzzleState createState() => _AlphabetPuzzleState();
}
class _AlphabetPuzzleState extends State<AlphabetPuzzle>
    
with SingleTickerProviderStateMixin {
  
int currentPuzzle = 0;
  
/// List of Questions
  List<String> questions = [
    
"What is the name of this game?",
    
"What is this animal?",
    
"What is the name of this animal?",
  ];
  
/// List of Answers
  List<String> answers = [
    
"mario",
    
"cat",
    
"wolf",
  ];
  
/// List of Images
  List<String> imageUrls = [
    
"https://images.pexels.com/photos/163077/mario-yoschi-figures-funny-163077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    
"https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    
"https://as1.ftcdn.net/v2/jpg/02/48/64/04/1000_F_248640483_5KAZi0GqcWrBu6GOhFEAxk1quNEuOzHJ.jpg",
  ];
  List<String> alphabet = [];
  List<String> userAnswers = [];
  late AnimationController _animationController;
  late Animation<
double> _animation;
  @override
  
void initState() {
    super.initState();
    generateAlphabetOptions();
    _animationController = AnimationController(
      
vsync: this,
      
durationconst Duration(milliseconds500),
    );
    _animation = Tween<
double>(begin: 0, end: 1).animate(
      CurvedAnimation(
        
parent: _animationController,
        
curve: Curves.easeInOut,
      ),
    );
  }
  @override
  
void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  
/// Generate Alphabets
  
void generateAlphabetOptions() {
    alphabet = answers[currentPuzzle].split(
'');
    alphabet.shuffle();
    userAnswers = List.filled(answers[currentPuzzle].length, 
'');
  }
  
/// Check Answer
  
void checkAnswer() {
    
if (userAnswers.join('') == answers[currentPuzzle]) {
      showDialog(
        
context: context,
        
builder: (BuildContext context) {
          
return AlertDialog(
            
titleconst Text('Correct Answer!'),
            
contentconst Text('Congratulations! You got it right.'),
            
actions: [
              TextButton(
                
onPressed: () {
                  Navigator.pop(context);
                  
if (currentPuzzle == questions.length - 1) {
                    
// Last puzzle, show completion message
                    showDialog(
                      
context: context,
                      
builder: (BuildContext context) {
                        
return AlertDialog(
                          
titleconst Text('Puzzle Completed'),
                          
contentconst Text('You have completed all the puzzles.'),
                          
actions: [
                            TextButton(
                              
onPressed: () {
                                Navigator.pop(context);
                                setState(() {
                                  currentPuzzle = 
0;
                                  generateAlphabetOptions();
                                });
                              },
                              child: 
const Text('Restart'),
                            ),
                          ],
                        );
                      },
                    );
                  
else {
                    
// Next puzzle
                    setState(() {
                      currentPuzzle++;
                      generateAlphabetOptions();
                    });
                  }
                },
                child: Text(
'Next'),
              ),
            ],
          );
        },
      ).then((_) {
        _animationController.reset();
        _animationController.forward();
      });
    
else {
      showDialog(
        
context: context,
        
builder: (BuildContext context) {
          
return const AlertDialog(
            title: Text(
'Incorrect Answer!'),
            content: Text(
'Please try again.'),
          );
        },
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    
return Scaffold(
      
appBar: AppBar(
        
backgroundColor: Colors.black,
        
title: Text('Alphabet Puzzle'),
      ),
      
body: Container(
        
decoration: BoxDecoration(
          
color: Colors.grey[400],
        ),
        
child: Column(
          
mainAxisAlignment: MainAxisAlignment.center,
          
children: [
            Padding(
              
paddingconst EdgeInsets.all(16.0),
              
child: Card(
                
elevation4,
                
shape: RoundedRectangleBorder(
                  
borderRadius: BorderRadius.circular(16.0),
                ),
                
child: Padding(
                  
paddingconst EdgeInsets.all(16.0),
                  
child: Column(
                    
crossAxisAlignment: CrossAxisAlignment.stretch,
                    
children: [
                      Text(
                        questions[currentPuzzle],
                        
styleconst TextStyle(
                          
fontSize18,
                          
fontWeight: FontWeight.bold,
                        ),
                      ),
                      
const SizedBox(height16),
                      SizedBox(
                        
height200,
                        
child: ClipRRect(
                          
borderRadius: BorderRadius.circular(8),
                          
child: Image.network(
                            imageUrls[currentPuzzle],
                            
fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      
const SizedBox(height60),
                      Row(
                        
mainAxisAlignment: MainAxisAlignment.center,
                        
children: List.generate(userAnswers.length, (index) {
                          
return DragTarget<String>(
                            
builder: (context, candidateData, rejectedData) {
                              
return Row(
                                
children: [
                                  Container(
                                    
height50,
                                    
width50,
                                    
alignment: Alignment.center,
                                    
decoration: BoxDecoration(
                                      
color: Colors.white,
                                      
borderRadius: BorderRadius.circular(8),
                                      
border: Border.all(
                                        
color: Colors.grey,
                                        
width1,
                                      ),
                                    ),
                                    
child: Text(
                                      userAnswers[index].isEmpty ? 
' ' : userAnswers[index],
                                      
styleconst TextStyle(fontSize24),
                                    ),
                                  ),
                                  
const SizedBox(width10,),
                                ],
                              );
                            },
                            
onAccept: (data) {
                              setState(() {
                                userAnswers[index] = data;
                              });
                            },
                          );
                        }),
                      ),
                      
const SizedBox(height16),
                      SizedBox(
                        
width500,
                        
height60,
                        
child: Row(
                          
crossAxisAlignment: CrossAxisAlignment.center,
                          
mainAxisAlignment: MainAxisAlignment.center,
                          
children: [
                            ListView.builder(
                              
shrinkWraptrue,
                              
physicsconst NeverScrollableScrollPhysics(),
                              
itemCount: alphabet.length,
                              
scrollDirection: Axis.horizontal,
                              
itemBuilder: (context, index) {
                                
return Row(
                                  
children: [
                                    Draggable<String>(
                                      
data: alphabet[index],
                                      
feedback: Material(
                                        
child: Container(
                                          
height50,
                                          
width50,
                                          
decoration: BoxDecoration(
                                            
color: Colors.white,
                                            
borderRadius: BorderRadius.circular(8),
                                            
border: Border.all(
                                              
color: Colors.grey,
                                              
width1,
                                            ),
                                          ),
                                          
child: Center(
                                            
child: Text(
                                              alphabet[index],
                                              
styleconst TextStyle(fontSize24),
                                            ),
                                          ),
                                        ),
                                      ),
                                      
childWhenDragging: Container(),
                                      
child: Material(
                                        
child: Container(
                                          
height50,
                                          
width50,
                                          
margin: EdgeInsets.only(left5,right5),
                                          
decoration: BoxDecoration(
                                            
color: Colors.white,
                                            
borderRadius: BorderRadius.circular(8),
                                            
border: Border.all(
                                              
color: Colors.grey,
                                              
width1,
                                            ),
                                          ),
                                          
child: Center(
                                            
child: Text(
                                              alphabet[index],
                                              
style: TextStyle(fontSize24),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    // 
const SizedBox(width10,),
                                  ],
                                );
                              },
                            ),
                          ],
                        ),
                      ),
                      
const SizedBox(height: 30),
                      ElevatedButton(
                        
onPressed: checkAnswer,
                        
style: ElevatedButton.styleFrom(
                          
shape: RoundedRectangleBorder(
                            
borderRadius: BorderRadius.circular(8),
                          ),
                          
primary: Colors.black,
                          
paddingconst EdgeInsets.symmetric(vertical12),
                        ),
                        
childconst Text(
                          
'Check Answer',
                          
style: TextStyle(fontSize18),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output :





follow my Instagram account :

https://www.instagram.com/nature.pulse_/

Conclusion :

The “Alphabet Puzzle” game offers an interactive and enjoyable experience for players to test their alphabet knowledge and problem-solving skills. By combining educational content with engaging gameplay, the game provides a unique way to reinforce letter recognition and vocabulary. The code implementation using Flutter showcases the versatility and ease of building interactive applications. Whether you’re a beginner or an experienced developer, exploring such projects can help you enhance your skills and create captivating experiences for users.

So, why not give the “Alphabet Puzzle” game a try? Challenge yourself and have fun while mastering the alphabet!


Post a Comment

0 Comments