Designing Flutter App using widgets

 Since we are done with the anatomy of the Flutter app and a basic app called, "I Am Groot" via Video Lectures we will create a basic structure for login which will not be responsive currently but we will see the use of widgets and how they are to be adjusted. This will help us to know how to lay out the user interface on the screen using various Flutter widgets. In this blog, we will create a simple layout of the demon slayer intro page which will look like this;

The Simple Layout

The very first step here is to create a new Flutter project and delete the code till the run app ().

and when you will write the code it won't change because we have to have the things mentioned inside the Flutter's stateless or stateful widgets.

 Now there are two types of widgets in flutter:

1: Stateless

2: Stateful

 our first interaction will be with Stateless widgets and for them to be created there is a shortcut "stless" and then enter which will give us the code such as:

Code Snippet of stateless widget

Here you can see class has been created and the name of the class will be as same as the name written after run app().

As far as the code for setting the background color will be coded after the return keyword, so your whole code will be placed after the return keyword is executed as shown below

The main topic is about stateless widgets here you can see that after "extend" our widget is described which comes with the "build method," which means whenever we change the color or any property of or for widgets then reload the app which will go and check which property is changed and to load that property it will check for the nearest build function is and it will re-run it.

Here is what your current app background will look like. So up until now we have seen the stateless widget and do not worry we will have so much more to see and create an app. Also if you are facing any trouble undertsnading via blogs you can access free video lectures via the link provided in bio.