What is Widget in Flutter?

Flutter is  an open-source Google's portable UI Software Development Kit (SDK) to develop beautiful, natively compiled applications for various platforms like android, iOS, Web, Desktop, Google Fuchsia and others from a single codebase that is written in Dart language.

 
If you start learning flutter you might keep one thing in your mind that everything in the flutter is a widget.

So definitely the first question that occurs in your mind is what is the meaning of widget ?

What are widgets in Flutter?

“Each and every element on a screen of the Flutter app is a widget”

• Flutter widgets are built using a modern framework that takes inspiration from React
• The View of the screen totally depends on the sequence and choice of the widgets way to declare and construct the UI used to develop the app.
• If you have knowledge of native iOS or Android Development then you might make the connection with the UIViews (on iOS) or views (on Android).
• But Dear the Widget is not just a piece of UI just like view in native Application Development.
• Widget is a lot more than just structural elements like view. text, buttons, image, slider or list. It’s helpful to display something, it might help to make design, handle user interaction and many more.
• Widget includes Text widget, Row & Column widget, Stack widget, Container widget, Padding widget, Center widget, and may more.
• So we can say that a widget is the heart ❤️ of flutter.
• Now you clear about that in flutter everything is a widget. Even you APPLICATION also itself a widget

Types of widgets in Flutter?

Primarily there are two types of widgets in flutter.

• Stateless Widgets
• Stateful Widgets

Stateless Widgets

• If a Widget can never change its called Stateless Widget.
• They are constant in nature. That means they don’t store any values and never it will change
• Text, Icon, and IconButton are examples of stateless widgets

Stateful Widgets

• If a widget can change when a user interacts with it, it’s called Stateful Widget.
• They are dynamic in nature. That means it can change and Update the UI based on value changes.
• Press the Button, Moving the Slider and perform task based on value changes, swipe left and delete the item from the list this all are examples of stateful widgets

widget Tree

• If you are already aware with flutter code then you might notice that there are Parent-Child widget trees in every flutter layout.
• Widgets are arranged into a tree and nested inside of each other to parent and child widget.
• Collection and combination of entire widgets tree makeup a layout that you see on the every screen of your app.

Example 

Here you can see the Layout Widget Tree of basic app screen:

import 'package:flutter/material.dart';

void main() => runApp(WidgetTree());

class WidgetTree extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       backgroundColor: Colors.lightBlue,
       appBar: AppBar(
         backgroundColor: Colors.blueAccent,
         title: Text("Widget Tree"),
       ),
       body: Container(
         child: Center(
           child: Text("Hello Flutter!!"),
         ),
       ),
     ),
   );
 }
}

Description of the Widgets which are Used:

• Scaffold – To Implements the basic material design visual layout structure.
• AppBar – To create a navigation bar at the top of the screen.
• Text  – To write anything on the screen.
• Container – To contain any types of widgets as a child widget.

Center – To give the center alignment to child widgets inside the center widgets.

Output:

Conclusion

So that’s it for the widgets and I hope now you are clear about the answer of the Question What are widgets in Flutter?