A Beginner’s Guide to Flutter

Hello there. I have been developing mobile applications for a few months now. It wouldn’t come as a surprise that I started with Java to build Android applications. Why not right, after all I knew Java, I knew XML so I didn’t have to learn a new language. I had heard of Flutter and I had heard you need to learn Dart for it. Knowing so many languages already, I wasn’t ready to add one more to the list. But now that I have worked with Flutter, I am not going back to Java. (It’s so much easier.) I mean okay, native development means fast and small applications, very cool! But I can’t allow you to test my patience every time I hit run. I don’t want to learn a new language (again) because some people won’t just use Android and love iOS instead. That would also mean doubling the development time. So then why did I learn Dart? Well I didn’t really have to, or actually there isn’t much to learn that you wouldn’t get used to as you go along. It’s pretty straight forward, you’ll see. The biggest benefit of using Flutter is that it directly generates the ARM binaries which will execute directly on the native platform running it faster. Whereas, JavaScript based frameworks need a bridge which converts the JavaScript code to Native Code which adds an additional layer of indirection and thus delays execution. So let’s get started with it and you’ll know for yourself how great it is!

Here’s what you are going to need:

1. An Editor
   You can use any editor you’d like. (Android Studio perhaps) I will be using Visual Studio Code (much lighter). Either ways, if you don’t have them you can set up an editor using this link. You will have to install the Flutter and Dart extensions in any editor you use.
2. The Flutter SDK (Duh.)
   You can install the Flutter SDK from here.
   Make sure you’ve run the famous ‘flutter doctor’ command, accepted the terms and are all set. (We don’t want warnings later on)

Before we get started, here are two very important links for you:

1. pub.dev
   This is where you will search packages from. Whenever you need a functionality in your app, chances are it has been already implemented. And those packages you can use directly in your app. Cool isn’t it?
2. flutter.dev
   To know just everything about Flutter.

Let’s start by creating a new project. Have you ever played Hangman?? Well I’ll be guiding you to create a game — Hangman!

This is how the final app will look like:

Creating new Project:

In case of VS Code, press Ctrl + Shift + P (or View -> Command Palette) and you will open the command palette. Select ‘Flutter: New Project’. Give the project a name, let’s say ‘hangman’. Give it some time and you’ll have your project ready. Connect your phone and make sure you have USB Debugging enabled. You can learn how to do that in Android from here. Optionally, you can use an emulator, know how to do that here. Press Ctrl + F5 (or Run -> Start Debugging) to start debugging. Give it some time and you will be able to see some output on your device, a counter app.

You will be able to see a lot of files, the one we will be working in is ‘main.dart’. That is the starting point of your app. Let’s erase everything that is there and paste this code in main.dart:

main.dart

import 'package:flutter/material.dart' — this line says we are importing the file material.dart from the package flutter. Almost every of your dart file in Flutter will have this import. It is almost like #include<stdio.h> for C. The file material.dart has all the ready widgets for you.

But before that, what are widgets?

Well everything in Flutter is a widget. Flutter basically gets a canvas and it draws the app on this canvas for you. So the flutter app is a widget, The App Bar that you put is a widget, The text of the heading there is a widget and the color of that text is a widget. So you build your UI out of widgets by arranging them in a hierarchical structure. So AppBar inside your Scaffold, Text inside AppBar and Color inside Text.

Flutter uses Material Library so you get a widget MaterialApp and Flutter gives you a widget Scaffold that gives you, well, a Scaffold… providing you an easy way of using what probably every app will need — appBar, body, a floatingActionButton maybe, a drawer and so on. Similar to java, the entry point is decided by a main method and inside the runApp method, we gave a class that extends StatelessWidget class.

A widget is either stateful or stateless. If a widget can change — when a user interacts with it, for example — it’s stateful.

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

So MyApp and MyHomePage are custom widgets built using material widgets. The class StatelessWidget has a build method that describes the part of the user interface represented by this widget. In the body of Scaffold we’ll be making changes now.

Adding assets:

I have used ‘Pangolin’ as fontFamily. You can get these fonts from here. Download and unzip the fonts, put the .ttf file in fonts folder inside the folder of your project. Also create an images folder where you will put all your image assets which you can find from here. Then we need to tell Flutter where to get these assets from. We have to describe that in pubspec.yaml file:

pubspec.yaml

Let’s change the body of our Scaffold in main.dart to:

main.dart

Here we build a Column. A Column widget takes many children and arranges them vertically (in a column). The mainAxisAlignment is set to spaceBetween which will take up the entire space and then arrange all children with space in between them. The crossAxisAlignment (the horizontal axis of the column) as center, but it won’t be centered unless it is taking the full width of the device which is why I surrounded it with a Container whose width is set to full device width using MediaQuery. And I added some padding around this entire Container because we don’t want our widgets to stick to the sides.

I added a GestureDetector for the play image so that ‘tap’ gesture for image could be listened to. (I could’ve just used a button here.. but I wanted something more fancy hence an image and we also get to learn about this cool widget — GestureDetector) The onTap method navigates us to new page.. it is set to Play() so we got to make a new play.dart and define class Play() there:

play.dart

This time, we use a StatefulWidget because the state is going to change here. ‘c’ is a variable in our state class that changes state when any button is clicked. Based on the value of ‘c’, the image of hangman changes. The displayWord variable will also change on each correct letter guessed. We’ll modify it in a much better way. But first we need to somehow generate the word.

Adding dependencies:

To generate word, we’ll use the english_words package from pub.dev. To add it as a dependency in our project, just add it in the depenedency section and press Ctrl + S, VSCode will automatically run flutter pub get to get that package for you. The dependency section of your pubspec.yaml should look something like this:

pubspec.yaml

We’ll create a file game.dart that will have all our utility methods in a class — Game. The constructor of this class will initialize its variables which are pretty self explanatory.

game.dart

In our play.dart, we’ll have to add this import at the top of our file.

import 'package:hangman/game.dart';

We’ll remove the variables ‘c’ and ‘displayWord’, those were just to get us started. Instead we’ll use a Game object here. So remove those variables and add Game game as a variable in the _PlayState class. Now we’ll add an overridden method initState to our _PlayState class. The framework will call this method exactly once for each State object it creates.

@override
void initState() {
  super.initState();
  game = Game();
}

Now comes the important task, to change the displayWord based on the key clicked. For this we only need to change the onTap method of our keys. Here is how it should look:

play.dart

So first thing is to check if the letter is already guessed, if so we’ll just display a toast that you have already guessed it and nothing more to do. Otherwise, we’ll show a toast of what letter the user has clicked. We’ll call the guessLetter method of our Game object and that will add the letter to either displayWordList or the wrongLettersGuessed list. This method is called in setState as it will change the displayWord variable and we want out UI to reflect that. Now if the word is guessed successfully, or the no of tries have reached a limit, we’ll navigate the user to the result page. And that’s it!

If you want the color of the guessed keys to be different, here is a method for that: just change the text style and change fontColor to _getLetterColor(letter).

play.dart

Now, all we have to do is create the result page and well that’s easy:

result.dart

Get the entire code here: github.com/malihanan/hangman. You can also get the apk from here.

Thanks for reading this article! Share with me your reviews/ideas. If you have any doubts or face an error, let me know in the comments. Don’t forget to give me a clap👏 :)