What is Widget ? Types of Widget

What is Widget?

In Flutter, we interact with the UI so the whole UI is made up of Widgets. If you are known to Android and Ios so in that we are using Views and UIViews same as in flutter it's called Widget but 

- The widget is not only about view it is more than that. Widgets describe what their view should look like given their current configuration and state.

Types of Widgets : 

Before we are discussing types of widgets first will know about State and what is the function we can use in that.

What is State?

- According to Flutter, 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 with the use of function State.setState. State objects are created by the framework by calling the StatefulWidget.createState.

A widget can be either a stateless widget or a stateful widget

Now, We discuss Types of Widget in Detail :

1. Stateless Widget

- A stateless Widget means a widget that has an immutable state. A stateless widget can only be drawn once when the Widget is loaded/built and cannot be redrawn based on any events or user actions. Their state depends on the information provided by the parent.

- Any change in the variables, icons, buttons, or retrieving data can not change the state of the app. the basic structure of a stateless widget overrides the build() method and returns a widget.

For example, we use Text or the Icon in our flutter application where the state of the widget does not change in the runtime. It is used when the UI depends on the information within the object itself. Other examples can be Text, RaisedButton, IconButtons.

 Let's create one example of a Stateless widget :

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container();   } }

So, let's discuss the code what I have done and what is the meaning of this. The stateless widget name is MyApp which is being called from the runApp() and extends a stateless widget. Inside this MyApp a build function is overridden and takes BuildContext as a parameter. This BuildContext is unique to each and every widget as it is used to locate the widget inside the widget tree.

- The widgets of a Flutter application are displayed in the form of a Widget Tree where we connect the parent widget and child widgets to show a relationship between them which then combines to form the state of your app.

The build function contains a container which is a widget of Flutter inside which we will design the UI of the app.  In the stateless widget, the build function is called only once, making the UI of the screen.

2. Stateful Widget

A stateful Widget means a widget with a mutable state that changes its state multiple times in its lifetime. It is the responsibility of the widget that the State is promptly notified when the state changes and it will use the method SetStste(). This simply means the state of an app can change multiple times with different sets of variables, inputs, data. and it is used when the UI can change dynamically.

- Stateful widgets are CheckBox, RadioButton, Form, TextField, Slider, InkWell, and many more.

Let's create one example of a Stateful widget :

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget {   @override   _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> {   @override   Widget build(BuildContext context) {     return Container();   } }

So let's discuss the code what I have done and what is the meaning of this. The Stateful Widget name is MyApp which is called from the runApp() and extends a stateful widget. In the MyApp class, we override the create state function. This createState() function is used to create a mutable state for this widget at a given location in the tree. This method returns an instance for their belonging state subclass.

- The other class which is _MyAppState extends the state, which manages all the changes in the widget. Inside this class, the build function is overridden which takes the BuildContext as the parameter. This build function returns a widget where we design the UI of the app. Since it is a stateful widget, the build function is called many times, creating the entire UI once again with all the changes.