Learn Flutter - Installation and Hello World! App using Flutter

Flutter is a UI framework developed by Google. It allows you to build Android/iOS apps faster and good looking with a single codebase. You can watch this video ,if you don't know anything about Flutter.

In this tutorial, I will be explaining Hello World! app, and details about installation also.

Before jumping into installation and coding, let's talk about requirements.

Prerequisites:
There is only one prerequisite, you should have knowledge of OOPS(Object Oriented Programming).

Our programming language will be Dart, there is no other option. Don't worry I will explain everything. Dart is the same as Java or any other object-oriented programming language.

Installation:  These four things are required for flutter app development.

1. JDK(Java Development Kit).

2. Android SDK:
If your PC is fast enough to run android studio and emulator both, then just install android studio. When you will open it, it will ask you to install the Android SDK, which is very easy.

If your PC is slow(<= 4 GB RAM ), then here is my advice for you- 
Install Android SDK Manually. Go here, and search for this heading - "command line tools only". Download SDK tools, and extract it to the appropriate location. Use sdkmanager to install the required tools.

3. Flutter SDK:
here you can see the best installation guide.

If you are Windows user, then just download the zip file which is given in the installation guide, and extract it wherever you want(C drive). Add Flutter(flutter\bin) to the PATH environment variable.

I don't know how to do it for Mac and Linux users, Sorry. You can follow the installation guide which I have mentioned above. 

4. Device:
There are two choices, Either you can use an Emulator or use Physical device. I use GenyMotion emulator, which is free for personal uses. If you want to use your physical device, then just enable developer options in it, and allow USB debugging.

Note: Android Studio users install flutter plugin from Settings > Plugin. It will allow you to do all things in Android Studio.

So, it is time to start developing your first app for Android :).

Step 1: Create a Project

Android Studio users can do it using File > New Project. I use the command prompt to do all these things, it is best.

• Change directory to wherever you want to create your project. For example, I would like to create my project in the Documents folder, open Command Prompt, and run cd Documents command.
• Create a project using flutter create hello. Remember, our project name is hello here. It will create a new folder named 'hello'.
• Close Command Prompt or terminal, we will open it later for executing the app.

Now, go to Documents\hello\lib and open main.dart file in your favorite text editor. I use Sublime Text 3 with Dart Plugin installed. You can use Visual Studio Code or Android studio also.

Step 2:

Clear all the code, that's very confusing for beginners. Paste this code-

Don't worry I will explain the code, but before that, let's see the output. Make sure your emulator or device is running.

If everything is ok, then open Command Prompt or terminal and change your directory to your project folder. In our case it is Documents/hello/, so run following commands:
-> cd Documents/hello/
-> flutter run

It should give the following output-

You can see "Hello World!", but this is shit, doesn't look like a real app. We will make it look better, but let me explain the code first.

Line no 1: We are importing material.dart package(or library) which is responsible for providing material design widgets in Flutter.

Line no 2: LOL, there is nothing in the second line.

Line no 3:
void main() => runApp(MyApp()) 
is same as
void main(){
  runApp(MyApp());
}
Everything in Flutter is a widget, even our app itself is a widget. So, runApp takes our app widget as an argument. You may be confused that MyApp() looks like a function call, that doesn't make sense right?. It is an object, object of our app widget class. You can also write it like- runApp(new MyApp()).

Line no 5:
We are creating our app widget class which is inherited from StatelessWidget class. 

There are two types of widgets in Flutter, Stateless and Stateful.
I will explain them in the upcoming tutorial. Generally, Stateful widgets are used when is changing its state, like animations, checkbox etc. Stateless widgets are the opposite of Stateful widgets. In our program, there is nothing changing, so we used the Stateless widget.

Do not forget, everything in flutter is a widget.

Line no 7:
Every widget you create should override build() function. It returns another widget, which is MaterialApp in our case. MaterialApp provides facility to use material design widgets.

Line no 8:
As you can see there are two arguments(home and title) given in MaterialApp, which means it contains parameterized constructor. It also takes one more argument called theme.

Line no 9: 
title parameter of MaterialApp widget takes a string, which is title of your app. If you want to see this title in the app, press overview/recent button(right to home button) in Android.

Line no 10:  
home parameter takes another widget, which is Text in our case. It will become child of MaterialApp widget.

You can realize that our app is nothing but tree(or hierarchy) of different widgets.

Now let's make our app look like a real app, paste the following code and run it using flutter run -

It will give this output-

You can see our Hello World! App, a real app. Let's understand the new code.

Scaffold: It is a widget which has ready-made structure of a basic app.  It takes several arguments, but here we are using two, appBar and body. appBar takes AppBar widget, which is creating that blue Box at the top in our case. Remaining part under the AppBar widget is body.

AppBar: It is again a widget, whose child is also a widget. In our case, it is taking Text widget as title.

Center: It is also a widget which puts our "Hello World!" Text widget in the center of the body.

That's all. Now, you know how to develop an Android app using Flutter :).

My next tutorial on Flutter is coming soon. Comment what you did not understand, I am always ready to answer your questions.