After learning the basics of Flutter in the previous class, we will learn what are the Widgets in Flutter. So let’s start:
Table of Contents
What are the Widgets in Flutter?
We make a screen using widgets and multiple screens make a mobile app. We will learn different essential widgets in this course to make a mobile app.
Material App
The first widget we gonna learn is Material App. We can check the parameters of every widget with Ctrl + Click. As it is on the top, therefore, it is called the parent or root widget. After that widget, we can add more inside widgets which are called child widgets. For example, we can add another widget i.e. Text widget for adding text in it. In the Text widget, there are further parameters like Textdirection.ltr which we can use. Let’s see how:
void main() {
runApp(
MaterialApp(
home: Text(
"ITS OUR FIRST APP",
textDirection: TextDirection.ltr,
),
),
);
}
How to recognize a Widget?
When we mouse hover, it will show that it is a widget. Every widget is in Blue and another widget can come in it.
Widgets Magic
Widgets work like magic. For example, the above example output would be with simple underlined text but if we also add a Material widget in it, it will nicely shape our work. Similarly, we can also use the Centre widget to bring it to the center of the screen. With the TextStyle widget, we can give styling to our text like increasing size, changing color, etc. Let’s use all these Widgets in the coming example:
void main() {
runApp(
MaterialApp(
home: Material(
child: Center(
child: Text(
" IT’S OUR FIRST APP ",
style: TextStyle(
fontSize: 48,
color: Colors.blue,
),
),
),
),
),
);
}
Text Button
We can make Text Buttons using the TextButton widget in Flutter to make simple buttons. But don’t worry, with Outlined Buttons and elevated Button widgets stylish buttons can also be made. We can use these buttons anywhere and can also do text styling as done in the previous example. Similarly, when this button is pressed then something needs to happen. What’s that? So for that purpose, we can make an anonymous function like onPressed, onLongPress, or onHover. For example, if we make an onPressed function then it will work while clicking on it. Let’s check it’s example:
void main() {
runApp(
MaterialApp(
home: Material(
child: Center(
child: ElevatedButton(
child: Text("Sign Up"),
onPressed: () {
print("Job Well Done");
},
),
),
),
),
);
}
So when we click on the Sign Up button, we will get “Job Well Done” on the console.
Scaffold
It is to expand or occupy the whole device screen. By using Scaffold, we can add different widgets like AppBar, Material, etc. There are two basic parts in it i.e. App Bar and Body. App Bar is used for a title in a bar whereas in the body, we can add other widgets. Let’s check how we can use Scaffold with App Bar, Material, and other widgets we have learned so far:
void main() {
runApp(
MaterialApp(
home: Scaffold(
// First property
appBar: AppBar(
title: Text("Hello World App"),
),
// second property
body: Material(
child: Text(
"Hello World!",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 55.5,
color: Colors.red,
fontWeight: FontWeight.bold,
backgroundColor: Colors.grey,
letterSpacing: 25.5,
wordSpacing: 20,
),
),
),
),
),
);
}
Tip:
Learn one widget daily to master it. Moreover, try widgets from official Flutter otherwise we can get outdated widgets.
How to remove the debug tag
To remove the debug tag from the top bar right side, after MaterialApp we can use this command:
debugShowCheckedModeBanner: false,
Task: Let’s try the above widgets in Flut Lab.