What is a WIDGET?

Widget

Each element on a screen of the Flutter app is a widget. The view of the screen completely depends upon the choice and sequence of the widgets used to build the app. And the structure of the code of an app is a tree of widgets.

Whenever you are going to code for building anything in Flutter, it will be inside a widget. The central purpose is to build the app out of widgets. It describes how your app view should look like with their current configuration and state. When you made any alteration in the code, the widget rebuilds its description by calculating the difference of previous and current widget to determine the minimal changes for rendering in UI of the app.

Widgets are nested with each other to build the app. It means the root of your app is itself a widget, and all the way down is a widget also. For example, a widget can display something, can define design, can handle interaction, etc.

The minimal Flutter app simply calls the runApp() function with a widget:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

The runApp() function takes the given Widget and makes it the root of the widget tree. In this example, the widget tree consists of two widgets, the Center widget and its child, the Text widget. The framework forces the root widget to cover the screen, which means the text “Hello, world” ends up centered on screen. The text direction needs to be specified in this instance; when the MaterialApp widget is used, this is taken care of for you, as demonstrated later.

When writing an app, you’ll commonly author new widgets that are subclasses of either StatelessWidget or StatefulWidget, depending on whether your widget manages any state. A widget’s main job is to implement a build() function, which describes the widget in terms of other, lower-level widgets. The framework builds those widgets in turn until the process bottoms out in widgets that represent the underlying RenderObject, which computes and describes the geometry of the widget.

Categories of widgets

There are mainly 14 categories in which the flutter widgets are divided. They are mainly segregated on the basis of the functionality they provide in a flutter application.

• Accessibility: These are the set of widgets that make a flutter app more easily accessible.
• Animation and Motion: These widgets add animation to other widgets.
• Assets, Images, and Icons: These widgets take charge of assets such as display images and show icons.
• Async: These provide async functionality in the flutter application.
• Basics: These are the bundle of widgets which are absolutely necessary for the development of any flutter application.
• Cupertino: These are the ios designed widgets.
• Input: This set of widgets provide input functionality in a flutter application.
• Interaction Models: These widgets are here to manage touch events and route users to different views in the application.
• Layout: This bundle of widgets helps in placing the other widgets on the screen as needed.
• Material Components: This is a set of widgets that mainly follow material design by Google.
• Painting and effects: This is the set of widgets which apply visual changes to their child widgets without changing their layout or shape.
• Scrolling: This provides sacrollability of to a set of other widgets that are not scrollable by default.
• Styling: This deals with the theme, responsiveness, and sizing of the app.
• Text: This display text.

Further reading, Types of widgets