Introduction to Widgets in Flutter
Any UI element in Flutter is called as a “widget”.
Eg: Center, Text, MaterialApp, Material, Scaffold, AppBar
Depending on state management there are two types of widgets.
1. Stateless widgets
2. Stateful widgets
Stateless widgets
A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete (e.g., consists entirely of RenderObjectWidgets, which describe concrete RenderObjects).
Simply stateless widget is a widget that does not require mutable state.
When a part of UI that is described doesn’t depend on other widgets, we use Stateless widgets.
Methods
build
Widget build (
BuildContext context
);
@protected
Describes the part of the user interface represented by this widget.
build method is called:
· The first time the widget is inserted in the tree
· When the widget’s parent changes its configuration
· When an InheritedWidget it depends on changes
createElement
@override
StatelessElement createElement() => StatelessElement(this);
Creates a StatelessElement to manage this widget’s location in the tree.
Stateful widgets
A widget that has mutable state.
State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState.
A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete (e.g., consists entirely of RenderObjectWidgets, which describe concrete RenderObjects).
Stateful widgets are useful when the part of the user interface you are describing can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state.
For compositions that depend only on the configuration information in the object itself and the BuildContext in which the widget is inflated, consider using StatelessWidget.
When the part of UI that we are describing changes dynamically, we use Stateful widget.
Methods
createElement
@override
StatefulElement createElement() => StatefulElement(this);
Creates a StatefulElement to manage this widget’s location in the tree.
@protected
State createState();
Creates the mutable state for this widget at a given location in the tree.
Let us use MaterialApp widget.
Here we used center widget under the MaterialApp widget. We added a background color too. You will get the following output.
When you minimize the application you will see this.
Let us use Scaffold widget instead of Material widget directly.
To allow app bar on top of your application scaffold widget is useful.
Under scaffold widget we defined body property. As the body of the scaffold here we pass Material widget. We will get the output as follows.
Here our main method becomes complex and let’s find a way to organize it.
Let us create another class that extends stateless widget. We used stateless widget that will not change in future. Stateless widget is our super class and let us create our sub class as “MyFlutterApp”. Now you will get an error. You can simply resolve it by clicking on bulb icon and selecting create 1 missing override(s). Now you will get build method as follows.
You can see that a widget will be returned and gets a parameter of build context. Let us return MaterialApp that we created earlier in the main method.
Now let us use our MyFlutterApp within runApp(). You will get the same output as above.
You can see “debug” banner in the top of the screen. Let us remove it. We can pass it as a parameter of MaterialApp as follows.
Now you can see tag has been removed as follows.
In Dart we can use function expressions. Let us use it here in our main function.
Let’s create more screens on our application. For that we can create separate files. Let’s create one more new package in lib folder. Package name should be in lower case letters and underscore can be used also. Let’s name it as “app_screens”. Once you create package you can create new Dart files on it by right clicking on our package. Here also you can use both lower case letters and underscore. File extension should be there as .dart. Let us create it as “first_screen.dart”.
Let’s create a separate dart class (FirstScreen) and extend it from stateless widget class. Then override the build method as you did earlier. Then cut and paste Material widget that you used earlier in main.dart.
Within the main.dart file in the body of main method we can call FirstScreen class. For that we should import this class in main.dart file.
This is the basic introduction of widgets in flutter. See you on another lesson.
