What Will I Learn?
- You will learn how to create a fail state and win state for Minesweeper
- You will learn how to add a timer to a flutter application
- You will learn how to add widgets to the bottom of the appbar widget
- You will learn about the preferred sized widget
Requirements
- IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
- The Dart SDK and the Flutter SDK
- A fair understanding of Mobile development and Imperative or Object Oriented Programming
Difficulty
- Intermediate
Description
In this Flutter video tutorial, we finish the Minesweeper application by adding a true fail state, win state, a timer, and a scoreboard. To add these features we need to create a few new global variables for our main stateful widget. These variables help us determine whether or not the user has lost the game, how many mines the user has detected, and an instantiation of a Stopwatch object and a Timer object. We initialize all of these variables inside of the reset board function so that we can use this function to reset the game when the user hits a fail state or wants to just reset the board state. The timer which acts like a stream, needs to be initialized and disposed of properly so that it will be consistent. We also make sure to have the timer run the set state function for our stateful widget every second so that when the stopwatch updates it will show on the board.
With these new global variables, we are able to apply various different boolean checks to make sure that the user can not do various things and to make sure that the board will change based on the state of the game. This includes the ability to disable the tiles when the user has hit a fail state and show a win or loss message. We also add functionality that will show the position of all of the mines when the user loses the game by having the board update all eighty one of its tiles and then changing the mine tiles to TileState.revealed
. We make use of a prefered size widget in our app bar so that we can add the timer text and the win/loss messages into the app bar of our application. We also add a reset button into the app bar.
The source code for this project can be found here
The freeware minesweeper game that we keep referring too can be found here
Video Tutorial
Curriculum
Related Series Tutorials
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)
Projects and Series
Stand Alone Projects:
- Dart Flutter Cross Platform Chat Application Tutorial
- Building a Temperature Conversion Application using Dart's Flutter Framework
Building a Calculator
- Building a Calculator Layout using Dart's Flutter Framework
- Finishing our Calculator Application with Dart's Flutter Framework
Movie Searcher Application
Curriculum
- Building a Multi-Page Application with Dart's Flutter Mobile Framework
- Making Http requests and Using Json in Dart's Flutter Framework
- Building Dynamic Lists with Streams in Dart's Flutter Framework
- Using GridView, Tabs, and Steppers in Dart's Flutter Framework
- Using Global Keys to get State and Validate Input in Dart's Flutter Framework
- The Basics of Animation with Dart's Flutter Framework
- Advanced Physics Based Animations in Dart's Flutter Framework
- Building a Drag and Drop Application with Dart's Flutter Framework
- Building a Hero Animation and an Application Drawer in Dart's Flutter Framework
- Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework
- Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework
- Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework
- Using the Different Style Widgets and Properties in Dart's Flutter Framework
- Composing Animations and Chaining Animations in Dart's Flutter Framework
- Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework
- Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework
- Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework
- Adding a Real-time Database to a Flutter application with Firebase
- Building a List in Redux with Dart's Flutter Framework
- Managing State with the Scoped Model Pattern in Dart's Flutter Framework
Posted on Utopian.io - Rewarding Open Source Contributors