and the distribution of digital products.
Here's How to Learn Data Structures the Fun Way With Flutter
Build games and learn Computer Science.
\ Data structures form the foundation of efficient software development, yet traditional learning methods often make them feel abstract and disconnected from real-world applications. This article takes a different approach — combining theory with hands-on implementation in Flutter to make learning both engaging and practical.
\ Inspired by Google’s Applied CS with Android, this adaptation for Flutter provides an interactive way to understand Arrays, HashSets, and HashMaps. In just 3–4 hours, you’ll gain a deeper understanding of these fundamental data structures while applying them in a meaningful context.
\ Whether you’re a beginner looking to strengthen your CS fundamentals or an experienced developer aiming to refine your skills, this guide offers an efficient and enjoyable way to master essential data structures. Let’s get started.
The Objectives of This Article:- Familiarize yourself with how dictionaries can be used to store data (in this case words).
- Use hash maps to store groupings of words, which are anagrams.
- Be able to explain the limitations that some data structures face when working with large data sets.
We will use a few data structures in the workshop activity, so please review Lists, HashSets, and HashMaps. You should be able to confidently insert, delete, access, and check the existence of elements using these data structures in Dart.
\ This is a small introduction to the data structures, HashSets and HashMap.
https://youtu.be/O-zTuD8JRbE?embedable=true
https://youtu.be/eMymKAFYaCs?embedable=true
\
A small starter exercise warm-up:As an example activity using HashMaps, create a program (not necessarily a Flutter app — command-line is fine) that will take in a three-letter country code (see ISO-3166) and return the full name of the country to which it belongs.
\ For example:
\
Input | Output ----- | ---------------------------------------------------- GBR | United Kingdom of Great Britain and Northern Ireland IDN | Indonesia IND | India\ As an extension, if the input is greater than 3 letters, consider it as the name of a country, and return the three-letter code for it. Write a helpful error message if the input is neither a valid code nor a country name.
\ Let us begin.
AnagramsAn anagram is a word formed by rearranging the letters of another word. For example, cinema is an anagram of iceman.
https://youtu.be/_C33CdeHgrc?embedable=true
The mechanics of the game are as follows:The game provides the user with a word from the dictionary.
\
The user tries to create as many words as possible that contain all the letters of the given word plus one additional letter. Note that adding the extra letter at the beginning or the end without reordering the other letters is invalid. For example, if the game picks the word ‘ore’ as a starter, the user might guess ‘rose’ or ‘zero’ but not ‘sore’.
\
The user can give up and see the words they did not guess.
\
\ \
We have provided you with some starter code that contains a 10,000-word dictionary and handles the UI portions of this game and you will be responsible for writing the AnagramBlocclass that handles all word manipulations.
\
Tour of the CodeThe starter code is composed of three main dart classes:
\ anagrams_page.dart
This is simple code that represents the screen we see above. We will use a bloc for state management for the screen. We will start by setting up the game by firing an event to the bloc and defining what will happen when the screen responds to different game states.
\
import 'package:anagrams/anagrams/bloc/anagram_bloc.dart'; import 'package:anagrams/anagrams/domain/word.dart'; import 'package:anagrams/l10n/l10n.dart'; import 'package:bloc_presentation/bloc_presentation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; class AnagramsPage extends StatelessWidget { const AnagramsPage({super.key}); @override Widget build(BuildContext context) { return BlocProvider( create: (_) => AnagramBloc() ..add( SetupAnagrams( DefaultAssetBundle.of(context), ), ), child: const AnagramsView(), ); } } class AnagramsView extends StatelessWidget { const AnagramsView({super.key}); @override Widget build(BuildContext context) { final l10n = context.l10n; return Scaffold( appBar: AppBar(title: Text(l10n.anagramAppBarTitle)), body: BlocBuilder\
- _SelectWord : shows the chosen word for the game to form anagrams from.
\
- _AnagramsTextField : takes in the word and fires an event to process the word the user has typed.
\
- _GuessListView : shows the guesses the user has entered and whether they are correct or not.
\
- _NextWordButton: resets the game and presents the user with all the anagrams of the current word and which one the user has guessed.
\ anagram_states.dart
\
enum AnagramGameStatus { initial, loaded, gameError } const minNumAnagrams = 5; const defaultWordLength = 3; const maxDefaultWordLength = 7; @immutable final class AnagramState extends Equatable { factory AnagramState({ AnagramGameStatus status = AnagramGameStatus.initial, List\ AnagramState holds all the state variables required to run the game.
- status: holds whether the game is loading (initial), loaded, or some error thrown.
- words: Lists all the words from the file word.txt that are loaded from the file.
- anagrams : holds all the anagrams for the chosen word.
- currentword: chosen word from a word list and word to form anagrams from.
- guesses: All the choices that the user enters and whether they are right or wrong.
\ We will get to the rest of the details, later in the article.
\ anagram_bloc.dart
\
import 'dart:async'; import 'dart:collection'; import 'dart:convert'; import 'package:anagrams/anagrams/domain/word.dart'; import 'package:bloc_presentation/bloc_presentation.dart'; import 'package:equatable/equatable.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; part 'anagram_events.dart'; part 'anagram_states.dart'; class AnagramBloc extends Bloc\
- onSetupAnagrams: Reads the file, split the words, and add them to the list. It also finds the current word, finds anagrams for that chosen word, and updates the state.
\
- onProcessWord : This is the handler called when the user enters a guess and updates the state.
- onReset : Called on clicking the next word button and resets the game.
- isGoodWord: Asserts that the given word is in the dictionary and isn't formed by adding a letter to the start or end of the base word.
- getAnagrams: Creates a list of all possible anagrams of a given word.
- getAnagramsWithOneMoreLetter: Creates a list of all possible words that can be formed by adding one letter to the given word.
- pickGoodStarterWord: Randomly select a word with at least the desired number of anagrams.
The first milestone focuses on creating a very simple working program. You’ll be implementing the foundations which will in turn be built on in Milestones 2 and 3.
\ We will be working on the anagram_bloc.dart .
getAnagramsImplement getAnagrams which takes a string and finds all the anagrams of that string in our input. Our strategy for now will be straightforward: just compare each string in wordsList to the input word to determine if they are anagrams. But how shall we do that?
\ There are different strategies that you could employ to determine whether two strings are anagrams of each other (like counting the number of occurrences of each letter) but for our purpose you will create a helper function (call it sortLetters) that takes a String and returns another String with the same letters in alphabetical order (e.g. "post" -> "post").
\ Determining whether two strings are anagrams is then a simple matter of checking that they are the same length (for the sake of speed) and checking that the sorted versions of their letters are equal.
wordSet and anagramMapUnfortunately, the straightforward strategy will be too slow for us to implement the rest of this game. So, we will need to revisit our onSetupAnagrams and find some data structures that store the words in ways that are convenient for our purposes. We will create two new data structures (in addition to words):
\
- A HashSet (called wordSet) that will allow us to rapidly (in O(1)) verify whether a word is valid.
\
- A HashMap (called anagramMap) that will allow us to group anagrams. We will do this by using the sortLetters version of a string as the key and storing a List of the words that correspond to that key as our value. For example, we may have an entry of the form: key: "opst" value: ["post", "spot", "pots", "tops", …].
\ As you process the input words, call sortLetters on each of them then check whether anagramMap already contains an entry for that key. If it does, add the current word to List at that key. Otherwise, create a new one, add the word to it, and store it in the HashMap with the corresponding key.
\ Once you have completed this, you have reached the end of Milestone 1! You are now ready to move on to the second milestone, where you will be adding more complexity to your program.
\
Milestone 2: Adding QualityMilestone 2 is all about ensuring that the words picked are suitable for the anagram game. Unlike. The previous milestone, this one is split up into three sections.
isGoodWordYour next task is to implement isGoodWord which checks:
- the provided word is a valid dictionary word (i.e., in wordSet), and
- the word does not contain the base word as a substring.
\
\ \ Checking whether a word is a valid dictionary word can be accomplished by looking at wordSet to see if it contains the word. Checking that the word does not contain the base word as a substring is left as a challenge!
getAnagramsWithOneMoreLetterFinally, implement getAnagramsWithOneMoreLetter which takes a string and finds all anagrams that can be formed by adding one letter to that word.
\ Be sure to instantiate a new List as your return value then check the given word + each letter of the alphabet one by one against the entries in anagramMap.
\ Also, update the onRestartGame to invoke getAnagramsWithOneMoreLetter instead of getAnagrams.
\
If your game is working, proceed to implement pickGoodStarterWord to make the game more interesting. Pick a random starting point in the word List and check each word in the array until you find one that has at least minNumAnagrams. Be sure to handle wrapping around to the start of the array if needed.
\
\ Two-thirds of the way through! Just one milestone and the extension before you are done.
\
\
Milestone 3: RefactoringAt this point, the game is functional but can be quite hard to play if you start with a long base word. To avoid this, let’s refactor onSetupGame to give words of increasing length.
\ This refactor starts in the onSetupGame where in addition to populating wordList, you should also store each word in a HashMap (let's call it sizeToWords) that maps word length to an List of all words of that length. This means, for example, you should be able to get all four-letter words in the dictionary by calling sizeToWords.get(4).
\ In pickGoodStarterWord, restrict your search to the words of length wordLength, and once you're done, increment wordLength (unless it's already at axWordLength) so that the next invocation will return a larger word.
\
\
ExtensionsThis activity (like all future activities) contains some optional extensions. If time permits, attempt at least one extension from the list below or one you have invented yourself.
\
- Two-letter mode: switch to allowing the user to add two letters to form anagrams.
\
- Optimize word selection by removing words that do not have enough anagrams from the pool of possible starter words. Note that those words should remain in wordSet since they can still be used as anagrams in other words.
\
- Two-word mode: Allow the user to add one letter to a pair of words to form two new valid words.
\
Congratulations on making it to the end! You’ve explored how Lists, HashSets, and HashMaps power efficient data handling in Flutter, just like they do in any well-optimized application. Understanding these structures gives you an edge in writing scalable and performant code. So go ahead, and give yourself a well-deserved pat on the back! Now, put this knowledge into action and keep building amazing things!