One of the initial concepts that trigger developers when beginning to explore Flutter is the fact that everything in Flutter is a widget. The Google’s UI toolkit supporting cross platform application development bases its core on Widgets. Hence, one must clearly understand the concepts of Widgets before diving into deeper complexities.

So what actually are Widgets?

Widgets are simply a way to define and build UI components in Flutter. They are the building blocks of Flutter applications. The entire UI is build with a combination of numerous widgets. Widgets are regarded as class instances that describe the view and configuration of any application. They may be analogous to views on Android and UIViews on iOS. However, unlike views widgets are not just about the UI. Some define structural elements like buttons and menus, some define the style such as fonts and color scheme others describe layout aspects like margins and padding, few more handle user interactions and the list goes on. Flutter is backed up with a variety of widgets to handle anything within the framework.

Widgets can thus be considered as a blueprint that are used in Flutter to build views.

What is a widget tree?

Widgets are considered as a unit of compostition. They are ordered based on their composition. They follow a parent child hierarchy where each widget nests inside its parent. The nested structure is followed throughout the application resembling a tree like structure and hence , the entire application can be viewed as a widget tree starting from its root widget typically MaterialApp or CupertinoApp.

The simple structure of a widget tree can be viewed from the following example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Home Page'),
        ),
        body: const Center(
              child: Text('Hello World'),
              ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
        onPressed:() {}), 
          
      ),
    );
  }
}
Equivalent Widget tree for above code

Know your primary widgets.

Here are the Flutter widgets that are typically used in every application developed using Flutter.

MaterialApp

MaterialApp Widget is a built in class in Flutter. It is responsible for giving your application a Material Design system look and feel. MaterialApp widget helps to gain access to all the other components and widgets provided by Flutter SDK including text widgets, AppBar widgets, Scaffold widgets, Stateless and Stateful widgets and many more. hence it can be considered as the core component of Flutter.

Scaffold

The Scaffold widget helps Implement the basic material design visual layout structure. The MaterialApp widget is where your application begins. It tells Flutter that the application is following material design and will make use of material components. The Scaffold widget hence, helps implement the material design. It gives access to a number of basic widgets including the AppBar, BottomNavigationBar, Drawer, FloatingActionButton etc.

AppBar

The AppBar widget provides a toolbar for your Flutter application. It usually sits on top of the app screen. This widget in Flutter can be considered analogous to the different toolbar options available in Android. The AppBar widgets utilizes various other widgets including IconButtons and Menus to perform different actions. They are typically used within the Scaffold Widget.

Container

The Container widget is majorly responsible for rendering , aligning and sizing of its child widgets on the screen. Because of this reason it is amongst the most used widgets in Flutter. The Container widget can parent a number of different child widgets and control their attributes such as the width, height, padding, background color, margin etc. The container widget is similar to the <div> tag in html. When not holding any child widget, the container takes up the entire available app screen. It is therefore, necessary to define a specific height and width for a container.

A container helps style widgets on the screen according to our convenience. Rendering containers themselves, require them to be wrapped inside a parent widget which may be a Scaffold, a Row, or a Column.

Row and Column

The primary layout widgets in Flutter : Row and Column widgets are used to align their children in a horizontal and vertical manner respectively. Designing the UI for any application requires its contents to be arranged in a fixed position and layout widgets help in just that. Rows and Columns are an important class of Widgets essential in structuring the way any application looks.


Next up. Click to learn the concept of a widget, how to create it, and the different types of widgets available in the Flutter framework.

Samriddhi is a curious and problem solving software developer. A go-getter and a passionate team player who loves converting the designs to high class functional codes.