A Beginner’s Guide to Flutter (Part 1)
By: Deepak Jogi
Tags: Flutter Beginner, Flutter, Android App Development, Android, Flutter App Development

This will be a 3 Part Guide

Part 1 : Building the User Interface Part 2 : Adding Functionality Part 3 : External Packages and What Next?

This guide assumes that you already have a flutter and an Android emulator running if you do not try to get it up and running first by referring to https://flutter.dev/docs/get-started/install.

I’ll be using Android Studio but feel free to use the Editor of your choice.

Okay without further ado, let’s get right into it.

Aim of this article

We’ll be making the default flutter app (sort of like a hello world app for flutter). Every time we press the ‘+’ button the value of the counter will increase and it will display the current Value.

Part 1: Building the User Interface

What we’ll be covering in this part

Creating your first Flutter Project Setting up a test device Running an Application on the test device File Structure Creating the UI of the Application Container Widget, Scaffold, Appbar, Floating Action Button Wrapping and Extracting Widgets

1. Creating your first Flutter Project

First things first fire up Android Studio (or VS Code) your first screen should look something like this.

Choose “Create New Flutter Project” option, now this should open up the following menu, Choose “Flutter Application” and press the “Next” Button.

In this new menu that opens up, give the project a Project Name. I just named it my_first_flutter_app.

Also, select the location where the project will be stored and the location where you have installed the flutter SDK (Try to avoid whitespaces in folder names). The Description hardly matters.

Okay now press the Next Button

We have to choose a Package name for our app.

Package Names usually have the structure com.company_name.app_name

For now, I’m giving the name “com.cse.myfirstflutterapp” but you can name it whatever you want but make it the same format.

Well that’s it you just created your first flutter project and the window should look something like this.

2. Setting up a test device

First, let’s open an android emulator to run our app.

Optional: You can choose to use USB debugging instead of an emulator. For this just enable USB debugging on your smartphone and connect your phone to your PC via a USB cable and allow USB debugging from the PC on your phone when prompted, you should now be able to run your apps on your phone in real-time. (I personally use USB debugging as it is more reliable)

If you chose to use an emulator over USB debugging click on the AVD (Android Virtual Device) manager button as shown below.

I am assuming you have already installed the emulator SDK, If you haven’t done this refer to this guide.

Okay now let’s create an emulator you can choose any option you want for your virtual device or just follow what I have done to create a Pixel 4 device.

Click on Create Virtual Device

Choose Pixel 4

Choose the Android version you want the device to run. For now, just go with the latest android version. But in usual cases we have to check compatibility in older versions of android as well.

You don’t really need to change anything in the above window, Click on finish. Now we can see our Android Virtual Device (Emulator) has been created. Run the emulator as shown below.

The emulator will now show up just switch it on as shown below. Note that it will take some time on the first run.

And voila we have got a virtual device to work on.

3. Running your Application

We can see that the new project that we created already has some code inside it. Let’s try to run this default code.

First, choose the device that you want to run your application on (The virtual device or the device you are debugging through USB).

Now click on this green triangle to run your default code.

The first run will take some time but you can see the code being executed in the bottom part of your editor on the run tab.

So the Default App should appear on your emulator feel free to play around with it and get used to it. Our aim is to recreate this app from scratch and add some more stuff to it.

You can stop the execution if you want by using the stop button.

Okay, now we need to talk about Hot Reload and Hot Restart.

3.1. Hot Reload and Hot Restart

Once your app is running we can use the hot reload button to reflect the changes you made into the code immediately.

Now on the emulator press the ‘+’ button a few times.

Now I’m gonna make a small change in the default code, Scroll down to the part of the default code shown below.

Change the text to ‘The number of time the button has been pressed = :’

Now if you press the hot reload button you get the following change almost instantaneously.

Now if instead of the hot reload button you had pressed the run button again we perform a Hot Restart

As you can see the number has been reset, this is the difference between hot reload and hot restart.

Hot restart destroys the preserved states of our app, and the code gets fully compiled again and starts from the default state. It takes more time as compared to hot reload but takes less time than the full restart function. (Definition taken from geeks for geeks and is linked below)

Hot reload will not change the state of the app. As we observed the number in the counter did not change.

Read more about Hot Reload and Hot Restart

4. File Structure in Flutter

We can see the file structure of our project on the left-hand side of the editor in the Project Window. Expand the folder called my_first_flutter_app (or whatever you named your project)

As we can see there are two folders called android and ios these contain files necessary for exporting our flutter app into each platform we will only be bothering with android for the time being. These contain native code in Java/Kotlin/Swift. But for now, we needn't bother with these folders.

Native code is stored here

We can also see that there is a folder called lib

This is where we write flutter code. In fact, the file with the default code we ran is main.dart. In flutter, we use dart files and code in the dart language. In a normal case, we will be working with tons of dart files but since this is our first app we will work with just “main.dart”.

Also, see that we have a file called “pubspec.yaml” this is a very important file but we will discuss what it does towards the end.

We have covered a lot of basics and now we are ready to build our very first app (maybe?).