Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)

in #utopian-io6 years ago (edited)

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

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

Projects and Series

Stand Alone Projects:
Building a Calculator
Movie Searcher Application

Curriculum



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @redart, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

Thank you for moderating both of my contributions.

Hey tensor, I had a question, recently I had been using a lot of typescript mainly on backend node.js. What's ur thoughts about Dart vs TypeScript, since both project are superset language of JavaScript that provides static typing.

In addition to that, recently Google had Dart support for Angular (I'm not familiar with Angular), so which language to use for using Angular

Dart is not actually a Superset of JavaScript like TypeScript is. Dart a full featured language that works with both AoT (Ahead of Time) compilation and JiT compilation (It has its own Virtual Machine called the DVM) and also can be used on a variety of platforms for a variety of use-cases (IoT, Mobile, Desktop, systems, games, front-end web and back-end web etc) . Its true that Dart was originally advertised as a Web first language (Google did intend to put the DVM into Chrome) but that was abandoned years ago (though there is still a Dart2Js tool).

Dart is basically the language you would get if Smalltalk and Java had a baby with JavaScript and then that baby was genetically modified with features of Erlang. Dart was also specifically written for large scale applications and it has the ability to be extremely mobile and preformant.

TypeScript is mainly a scripting language that gives you the ability to add static typing to JavaScript. This means that TypeScript mostly shares its ecosystem with JavaScript. Also, while you can use Typescript for other things outside of web development, you still run into the same issues you would find with JavaScript in those use cases.

To compare TypeScript and Dart, you would have to actually compare TypeScript to Dart's Dart2js tool. Dart itself does not have great interoperability with JavaScript so JS libraries need to either be rewritten in Dart or put into a Dart wrapper for them to work. This is why Dart has its own version of Angular which is separate from the TypeScript version.

While Dart Angular is very useful and it has been battle tested by Google for some rather large projects; TypeScript still has the edge because you can make use of any library that is already on Npm and you also get the backing of the JS community.

With all of that being said, one of the main pluses of Dart is that it is extremely easy to learn. I find that the people I teach can become productive in a few hours if they already know a language like Java or JavaScript. So yeah, ultimately you don't really have to pick one or the other since you should be able to learn Dart in a few hours if you already know TypeScript.

Btw, thank you for the complements, I am glad you've found my work to be satisfactory.

Thanks for spending time explaining, really appreciate.

Really excited about Dart, so much potential especially when google announce it being used in Fuchsia. I guess it gonna be the next hit it the programming world.

Just a question, what is final in dart 😅

Loading...

@tensor, I really appreciate your work, might check it out when I am free.

There is not much Dart tutorial out there, you really did a great job

Hey @tensor I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.30
TRX 0.12
JST 0.034
BTC 63475.77
ETH 3117.23
USDT 1.00
SBD 3.94