(i) Flutter –<\/strong> Install<\/span>\u00a0Flutter<\/a>, depending on your operating system . Now that the setup is ready, let\u2019s get started!<\/p>\n Please download the source code of Flutter Hangman Game Project: Flutter Hangman Game Project Code<\/a>.<\/strong><\/p>\n Let\u2019s start with creating a new Flutter Hangman Game Project through the Flutter terminal. Go to the directory where you want to save the project using:-<\/p>\n Then create a new project using the below command:-<\/p>\n We are using images in our app to display the stages of the hangman. In Flutter, we need to specify these assets(images in our case) in our pubsec.yaml file. In the file, under the assets section, you can add the images we are using with their specific path to the image files. You can see the changes in the below image.<\/p>\n Before building the UI of the app, let\u2019s write the code for the logic of the app. Here we defined a few variables like hanged, which is total number of guesses; _wrongGuesses, which is the number of wrong guesses by the player, wordList which is the list of words that will be used to guess in the game, letterGuessed, which will store the set of letters that the player has guessed. We have also initialized several StreamController, which will be used to listen to various events such as _onWin, _onLose, _onWrong, _onRight, _onChange.<\/p>\n Other that this, we have created several functions which we will use for the logic of the app. These functions are:-<\/p>\n (i) newGame –<\/strong> This help intitalizing a new game where a new word will be selected from the list, variables like _wrongGuesses and lettersGuesses will be reseted Now that we know the logic of the app, let\u2019s start building the UI of the app. We have imported the material.dart package from Flutter to use the widgets, which will help in building the UI components. We have also imported the hangman logic file which we created in the previous section, and another home_page file, which we will see in the next section.<\/p>\n We have initialized a list of words to be used in the game, game logic which we will use, and color scheme by the variable kColorScheme which we will use to define the theme of the app.<\/p>\n In the MaterialApp, we define theme using ThemeData and use the color scheme defined in the variable. We also define background and foreground color for appBarTheme. In the home, we return the Scaffold widget in which we have an AppBar, and in the body, we return the Home Page which we will create in the next section.<\/p>\n We have created the custom widget Home Page to show the main content of the page which is a Stateful widget as the UI of the app needs to be rendered again with user interaction. Here we initialize variables like victoryImage which refers to the path of the victory image, currentImageState that is used to show which stage of hangman image will be displayed on the screen, alphabets which is a list from A-Z, showNewGame which is a boolean variable that tells whether the button New Game should be displayed on the page or not and currentWord variable which is the word that user types.<\/p>\n We have also created functions which will be used as the user interact with the game. These functions are updateActiveWord which updates the currentWord as user types, updateHangmanImage which update the hangman image depending on the stage of game, _gameOver which is used to update _showNewGame variable, _win which executes when user wins the game and _newGame which again initializes all the variables from the start.<\/p>\n In the initState, we use various listeners which we created in the hangman_logic file to execute the functions we defined in case there is any change or user selects the wrong letter or if user wins or loses the game.<\/p>\n In the build function, we return the content of the page, which is shown using the Column widget, which is contained in a container. In the column widget\u2019s children argument, we return the Image of the current stage of hangman wrapped in the Expanded widget so that the image takes as much space as possible, Text widget to show the currentWord typed by the user which has been given padding using the padded widget and a custom widget, BottomContent which we will create in the next section. The BottomContent widget is also wrapped around the Expanded widget, so it should take as much space as available.<\/p>\n Here below we have created a custom widget, BottomContent, which is a stateless widget. It is used to display the bottom content of the page. In the constructor function, we accept various arguments that we will use while building the widget.<\/p>\n The content is displayed on the basis of the displayNewGame parameter, which we accept as an argument in the constructor function.<\/p>\n If the variable is true, then we display the TextButton for the NewGame; otherwise, if it is false, we display the TextButton for letters from A-Z using the Wrap Widget, which displays the content row-wise and, if needed, uses the next row. While pressing the letter, it checks if the letter has already been guessed, and then nothing executes; else, it\u00a0executes the guessLetter function defined in the hangman logic.<\/p>\n
\n(ii) Android Studio –<\/strong> Android Studio<\/a> is necessary as it will run the app in the Android emulator.
\n(iii) Visual Studio Code<\/strong>\u2014<\/strong>Although this is not necessary, you can also build apps in Android Studio. In our case, we have used\u00a0VS Code<\/a><\/span>\u00a0as it is a good code editor.<\/p>\nDownload Flutter Hangman Game Project<\/h3>\n
Creating New Flutter Hangman Game Project<\/h3>\n
cd $Project-directory-path<\/pre>\n
flutter create hangman<\/pre>\n
![\"Creating](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/Creating-New-Flutter-Project.webp\")
<\/a><\/p>\nChanges in the pubsec.yaml file<\/h3>\n
![\"Changes](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/Changes-in-the-pubsec.yaml-file.webp\")
<\/a><\/p>\nSteps to Build Flutter Hangman Game<\/h3>\n
1. Creating the Logic for Hangman Game<\/h4>\n
\n(ii) guessLetter –<\/strong> This function will be executed as the player selects a letter. It will add the letter in lettersGuessed set and check if the letter is present in the word. It will check for the win, and if the letter is not in the word, it will check for a lose and update the variables accordingly.
\n(iii) isWordComplete –<\/strong> It checks if the player has guessed all the letters of the word.<\/p>\nimport 'dart:async';\r\n\r\nclass HangmanGame {\r\n static const int hanged =\r\n 7; \/\/ number of wrong guesses before the player's demise\r\n\r\n final List<String> wordList; \/\/ list of possible words to guess\r\n final Set<String> lettersGuessed = Set<String>();\r\n\r\n List<String> _wordToGuess = []; \/\/ Made changes here\r\n int _wrongGuesses = 0; \/\/ Made changes here\r\n\r\n StreamController<Null> _onWin = new StreamController<Null>.broadcast();\r\n Stream<Null> get onWin => _onWin.stream;\r\n\r\n StreamController<Null> _onLose = new StreamController<Null>.broadcast();\r\n Stream<Null> get onLose => _onLose.stream;\r\n\r\n StreamController<int> _onWrong = new StreamController<int>.broadcast();\r\n Stream<int> get onWrong => _onWrong.stream;\r\n\r\n StreamController<String> _onRight = new StreamController<String>.broadcast();\r\n Stream<String> get onRight => _onRight.stream;\r\n\r\n StreamController<String> _onChange = new StreamController<String>.broadcast();\r\n Stream<String> get onChange => _onChange.stream;\r\n\r\n \/\/ ignore: unnecessary_new\r\n HangmanGame(List<String> words) : wordList = new List<String>.from(words);\r\n\r\n void newGame() {\r\n \/\/ shuffle the word list into a random order\r\n wordList.shuffle();\r\n\r\n \/\/ this extracts the first word from the random list of words\r\n _wordToGuess = wordList.first.split('');\r\n\r\n \/\/ reset the wrong guess count\r\n _wrongGuesses = 0;\r\n\r\n \/\/ it clears the lettersGuessed set\r\n lettersGuessed.clear();\r\n\r\n \/\/ declare the change (new word)\r\n _onChange.add(wordForDisplay);\r\n }\r\n\r\n void guessLetter(String letter) {\r\n \/\/ store guessed letter\r\n lettersGuessed.add(letter);\r\n\r\n \/\/ it checks if the user has won if letter in the word\r\n \/\/ otherwise, check for player death\r\n if (_wordToGuess.contains(letter)) {\r\n _onRight.add(letter);\r\n\r\n if (isWordComplete) {\r\n _onChange.add(fullWord);\r\n _onWin.add(null);\r\n } else {\r\n _onChange.add(wordForDisplay);\r\n }\r\n } else {\r\n _wrongGuesses++;\r\n\r\n _onWrong.add(_wrongGuesses);\r\n\r\n if (_wrongGuesses == hanged) {\r\n _onChange.add(fullWord);\r\n _onLose.add(null);\r\n }\r\n }\r\n }\r\n\r\n int get wrongGuesses => _wrongGuesses;\r\n List<String> get wordToGuess => _wordToGuess;\r\n String get fullWord => wordToGuess.join();\r\n\r\n String get wordForDisplay => wordToGuess\r\n .map((String letter) => lettersGuessed.contains(letter) ? letter : \"_\")\r\n .join();\r\n\r\n \/\/ check if all letters in the word are selected by the plsyer\r\n bool get isWordComplete {\r\n for (String letter in _wordToGuess) {\r\n if (!lettersGuessed.contains(letter)) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n }\r\n}<\/pre>\n2. Starting with the Main Layout of the App<\/h4>\n
import 'package:flutter\/material.dart';\r\n\r\nimport '.\/home_page.dart';\r\nimport '.\/engine\/hangman_logic.dart';\r\n\r\nconst List<String> wordList = [\r\n \"PLENTY\",\r\n \"ACHIEVE\",\r\n \"CLASS\",\r\n \"STARE\",\r\n \"AFFECT\",\r\n \"THICK\",\r\n \"CARRIER\",\r\n \"BILL\",\r\n \"SAY\",\r\n \"ARGUE\",\r\n \"OFTEN\",\r\n \"GROW\",\r\n \"VOTING\",\r\n \"SHUT\",\r\n \"PUSH\",\r\n];\r\n\r\nColorScheme kColorScheme =\r\n ColorScheme.fromSeed(seedColor: const Color.fromARGB(255, 239, 221, 179));\r\nHangmanGame gameLogic = HangmanGame(wordList);\r\nvoid main() {\r\n runApp(MaterialApp(\r\n theme: ThemeData(\r\n colorScheme: kColorScheme,\r\n appBarTheme: const AppBarTheme().copyWith(\r\n backgroundColor: kColorScheme.onPrimaryContainer,\r\n foregroundColor: kColorScheme.primaryContainer),\r\n ),\r\n home: Scaffold(\r\n appBar: AppBar(\r\n title: const Text('Hangman (By TechVidvan)'),\r\n ),\r\n body: HomePage(\r\n logic: gameLogic,\r\n ),\r\n ),\r\n ));\r\n}<\/pre>\n3. Creating the Home Page<\/h4>\n
import 'package:flutter\/material.dart';\r\n\r\nimport 'package:hangman\/engine\/hangman_logic.dart';\r\nimport '.\/widgets\/bottom_content.dart';\r\n\r\nclass HomePage extends StatefulWidget {\r\n const HomePage({super.key, required this.logic});\r\n final HangmanGame logic;\r\n @override\r\n State<HomePage> createState() {\r\n return _HomePageState();\r\n }\r\n}\r\n\r\nclass _HomePageState extends State<HomePage> {\r\n final String victoryImage = 'assets\/images\/hangman_8.png';\r\n int currentImageState = 0;\r\n\r\n final List<String> alphabets = [\r\n 'A',\r\n 'B',\r\n 'C',\r\n 'D',\r\n 'E',\r\n 'F',\r\n 'G',\r\n 'H',\r\n 'I',\r\n 'J',\r\n 'K',\r\n 'L',\r\n 'M',\r\n 'N',\r\n 'O',\r\n 'P',\r\n 'Q',\r\n 'R',\r\n 'S',\r\n 'T',\r\n 'U',\r\n 'V',\r\n 'W',\r\n 'X',\r\n 'Y',\r\n 'Z'\r\n ];\r\n\r\n late bool _showNewGame = false;\r\n late String _currentWord = '';\r\n\r\n @override\r\n void initState() {\r\n super.initState();\r\n\r\n widget.logic.onChange.listen(_updateActiveWord);\r\n widget.logic.onWrong.listen(_updateHangmanImage);\r\n widget.logic.onWin.listen(_win);\r\n widget.logic.onLose.listen(_gameOver);\r\n\r\n _newGame();\r\n }\r\n\r\n void _updateActiveWord(String word) {\r\n setState(() {\r\n _currentWord = word;\r\n });\r\n }\r\n\r\n void _updateHangmanImage(int wrongGuessCount) {\r\n setState(() {\r\n currentImageState = wrongGuessCount;\r\n });\r\n }\r\n\r\n void _gameOver(Null) {\r\n setState(() {\r\n _showNewGame = true;\r\n });\r\n }\r\n\r\n void _win(Null) {\r\n setState(() {\r\n currentImageState = 8;\r\n _gameOver(Null);\r\n });\r\n }\r\n\r\n void _newGame() {\r\n widget.logic.newGame();\r\n\r\n setState(() {\r\n currentImageState = 0;\r\n _currentWord = '';\r\n _showNewGame = false;\r\n });\r\n }<\/pre>\n@override\r\n Widget build(BuildContext context) {\r\n return Container(\r\n alignment: Alignment.center,\r\n width: double.infinity,\r\n height: double.infinity,\r\n child: Column(\r\n children: [\r\n Expanded(\r\n child: Image.asset('assets\/images\/hangman_$currentImageState.png'),\r\n ),\r\n Padding(\r\n padding: const EdgeInsets.all(20),\r\n child: Text(\r\n _currentWord,\r\n style: const TextStyle(fontSize: 30, letterSpacing: 5.0),\r\n ),\r\n ),\r\n Expanded(\r\n child: Center(\r\n child: BottomContent(\r\n alphabets: alphabets,\r\n displayNewGame: _showNewGame,\r\n newGame: _newGame,\r\n userLettersGuessed: widget.logic.lettersGuessed,\r\n guessLetter: widget.logic.guessLetter,\r\n ),\r\n ))\r\n ],\r\n ),\r\n );\r\n }\r\n}<\/pre>\n4. Helper Widgets Used in the App<\/h4>\n
import 'package:flutter\/material.dart';\r\n\r\nclass BottomContent extends StatelessWidget {\r\n const BottomContent(\r\n {super.key,\r\n required this.displayNewGame,\r\n required this.alphabets,\r\n required this.newGame,\r\n required this.userLettersGuessed,\r\n required this.guessLetter});\r\n\r\n final bool displayNewGame;\r\n final List<String> alphabets;\r\n final Function() newGame;\r\n final Set<String> userLettersGuessed;\r\n final Function(String) guessLetter;\r\n @override\r\n Widget build(BuildContext context) {\r\n if (displayNewGame) {\r\n return TextButton(\r\n onPressed: newGame,\r\n child: const Text(\r\n 'New Game',\r\n style: TextStyle(fontSize: 24),\r\n ),\r\n );\r\n } else {\r\n Set<String> lettersGuessed = userLettersGuessed;\r\n return Padding(\r\n padding: const EdgeInsets.all(3.0),\r\n child: Wrap(\r\n spacing: 12,\r\n runSpacing: 3,\r\n alignment: WrapAlignment.center,\r\n children: alphabets\r\n .map(\r\n (letter) => TextButton(\r\n style: TextButton.styleFrom(\r\n side: const BorderSide(width: 1.0),\r\n textStyle: const TextStyle(\r\n fontSize: 18, fontWeight: FontWeight.bold),\r\n padding: const EdgeInsets.all(2.0),\r\n ),\r\n onPressed: lettersGuessed.contains(letter)\r\n ? null\r\n : () {\r\n guessLetter(letter);\r\n },\r\n child: Text(letter),\r\n ),\r\n )\r\n .toList(),\r\n ),\r\n );\r\n }\r\n }\r\n}<\/pre>\nFlutter Hangman Game Output<\/h3>\n
![\"Flutter](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/Flutter-Hangman-Game-output-.webp\")
<\/a><\/p>\n![\"Flutter](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/Flutter-Hangman-Game-.webp\")
<\/a><\/p>\n![\"output](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/output-Flutter-Hangman-Game-.webp\")
<\/a><\/p>\n