How do you make Hello World App on Flutter? (Class 21)

Before finding the answer to “How do you make Hello World App on Flutter?” let’s find some basic questions that appear in a Mobile App Developer’s mind:

How long does it take to learn Flutter?

It is not a long journey to learn Flutter and depends on us. If we have a good command of Dart and understand the structure of Flutter, it becomes easy for us to be a Flutter Developer within six months or so.

Is Flutter no code?

Though we mostly have pre-defined commands and coding, we need to do coding in Flutter on occasion as well.  So we must know at least basic coding of Dart to excel in this field. 

Is Flutter good for app development?

It is considered one of the best programs for app development. The reason behind the rapid progression of this open-source platform in recent years is Google. Flutter is backed & supported by Google and it is loaded with all the tools required in app development with a user user-friendly interface.

Flutter Project Structure

Before starting Flutter, we need to know the basics to start in Flutter. For this purpose, we first check the flutter project structure. When we start Flutter, there is a Project option on the left upper side that has all Flutter files. We can click on > to expand the folders/ directories/ files. The following directories are mainly concerned with us:

Lib directory

Pubspec.yaml

Android/ iOS directories

Lib Directory

Lib means Library. Our flutter code will be in the lib directory with the main.dart name. We can also right-click on the lib directory and add new dart files as per our requirement. The file name must be in small letters with an underscore like fetch_data. We can also add sub-directories or packages in the lib directory with ease. It is a good practice to make short names while creating directories. A professional developer always organizes code in the best manner.

Pubspec.yaml file

The second most important file in our Flutter project is pubspec.yaml. Yaml is a serialization language which we will learn in coming classes. All configuration of the project is in it.

Android & iOS directories

On the 3^rd number, our concern will be with Android & iOS directories. When we complete a project and finalize all code then we need to build our app for Android and iOS. The build files will be in both directories i.e. Android & iOS. It is to remember that if we have selected more platforms like Windows, applications, etc. while creating our project, we will also see those folders along with them.

How to make a Hello World program

The things we learned in Dart need to be applied in Flutter to know how to make a Hello World program. We will start from zero and with basic steps. Let’s start:-

Step 1:

Firstly, we have to import the library at the start of every project which is as under:-

import ‘package:flutter/material.dart’;

Tip: In case it is not there, we just need to type only import ‘material. Thereafter, instantly suggestion will come and we can press enter to add this.

Step 2:

We will simply write our main function as under:-

void main(){
 
}

Note: Our code will be between the above curly brackets.

Step 3:

We will create a runApp function as under:-

runApp( );

As we know in brackets of a function, we add parameters of that function. To check the details of a function like runApp, we will press Ctrl from the keyboard and click on it. Alternatively, we can also press Ctrl + P. We will have to add a widget type required parameter i.e. MaterialApp like this in runApp:

MaterialApp(  ),

Step 4:

At only this stage we will assume that MaterialApp is also a function and in the next step, we need to add its parameters. Now we will add its parameter i.e. home which is a key and needs a value too which will be Text like this:

home: Text( ),

Step 5:

We will add Text in String data like this

home: Text( “Hello World”);

How do you create a hello world program in Flutter

That’s how you create a Hello World program in Flutter by following the above steps. We just need to add a comma after every bracket. So our whole code will be as under:-

runApp(MaterialApp(home: Text(“Hello World”),),);

Flutter Format Code:

We have done our work but it isn’t easy to read the above code. It will be more difficult when we will add more parameters. So we need to format it by right clicking and selecting Reformat Code with ‘dart format’ or by using the shortcut command Ctrl + Shift + Alt + L and pressing enter to make it as per Flutter format as under:-

import ‘package:flutter/material.dart’;

void main() {
  runApp(
    MaterialApp(
      home: Text(“Hello World”),
    ),
  );
}

Running Code for live view

In the last class, we learned how to run code on a virtual device. But it is for fast laptops/PCs. If we have less RAM storage, it can slow our system. So it is better to run our code directly on our cell phone. For this purpose, we will attach our phone via USB with a PC/ laptop and then go into mobile settings to enable debugger mode in developer options. Now our phone will be shown in flutter and by clicking the play button our code will be run live on our mobile phone.

Hopefully, you have the answer on how do you make Hello World App on Flutter? Now, it is your task to create a Hello World app on Flut Lab which is an online tool for Flutter.