Flutter Basics :- Your very first app
By: Pranesh Prashar
Tags: Flutter, Android, Apps, App Development, Flutter App Development

Let’s get it started to learn some basic concepts of the flutter. If you donot have the setup ready then read my another blog to setup the flutter here. It is very detailed go and check it out. On that note let’s start.

Creating the first app :-

open cmd on windows and create a directory/folder to keep all the codes for the app , Now go to that folder and type the following command to create app

flutter create <your app name>

flutter create <your app name>

you can run it from cmd also

We can run the app from cmd also but we are going to dig deep and look out what is in the code. Now go to the VSCODE and open the folder where we have created our app. When we open our folder where we created the app we see bunch of things but we have to go to the lib folder and there is main.dart file and open it

click on lib and then main.dart

Now when you click the main.dart file you will see a bunch of codes written already, but not to worry about it . you can either delete it or run it to see what flutter have actually made for you.But we are here to create our own app and we want to be the master of the code so delete them all and start fresh.

THE BASICS :-

If you have into programing world then we know the program start with the main function and it has some libraries. So we are going to do the same thing here. In the main.dart file we will create main function.

When you write main then the plugins we have installed give some suggestions for the main

This is how the main function looks like. when we run the code it looks for the main function and start from there.”()” these small bracketes are generally know as parameter and we can pass value in it . Not to be needed and concerned about it now and main function is open and closed with “{” and “}”

This is how it look like . we donot need any parameters se just remove it and create a blank main function.

Now we have create a main function so it must do something for us. In the main function we are going to create our own function so write any name for your function .

created our own function

Now we have created our own function now the main function know that in the whole code there is some function exist called myapp and it will search for that function called myapp.

Now we are going to define our function with the use of some pre-created flutter function. In this case we are using a widget called STATELESS WIDGET. So putting it simply what a statelss widget is It is like a function which is not mutable. In other words A widget that does not require mutable state. You can read this document for deep knowledge.

click on the stateless widget to create it

It will create a class of stateless widget. we donot need the second line as it is not necessary so we delete it.

Point to note is that when we create a class we need to define class or we need to give a name to the class for the function. So we give the class

So we give the class the name of the function we create in main

so this is final code that we have written. All we have to do is run the code and see it..Note that return is changed from Container to material

The changes were made because “Container ” is like “div ” in web development and we are in no need to use that now and as that of material function you could think that of as a base canvas or a white paper.

When you run the code without using “runapp()” then it will throw error.

The run app has this definition :- Inflate the given widget and attach it to the screen.

You can read the definition here also

The widget is given constraints during layout that force it to fill the entire screen. If you wish to align your widget to one side of the screen (e.g., the top), consider using the Align widget. If you wish to center your widget, you can also use the Center widget.

When you run this code you will see a white blank screen in your virtual phone or real phone if you are using debugging mode on android. Now do this till here and we will see the next part if you are finished till here.

click on run and then run without debugging

if you are using debug mode it will directly run on android

when you run this app it will simply show this white canvas or white screen on your phone.

Congo to yourself for being till here next we will write something on this canvas and see how it turn out to be.