Flutter Widgets List and Hierarchy

Introduction to Flutter

Flutter is Google's UI toolkit for creating beautiful, natively compiled iOS and Android apps from a single code base. To create an application, let's start with the widgets, which are the building blocks of a Flutter application. Widgets describe how the view should look given its current configuration and state. This includes text widgets, row widgets, column widgets, container widgets etc.

Why Flutter is important?

Flutter helps us to build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single code base. Flutter is not a framework or library like other popular solutions out there. This is a complete software development kit.

Dart Language

Flutter uses Dart language, which is an object-oriented programming language. Dart is a client-optimized language for developing fast applications on any platform. It aims to offer the most productive programming language for cross-platform development coupled with a flexible runtime platform for application frameworks.

User Experience Design focuses on the user-first way of designing products/services and their requirements. Taken From Article, What is User Experience Design, Tools and Principles

What are Flutter Widgets?

In Flutter, widgets are a way to declare and build your UI. Like views, widgets are not part of the user interface. Widgets are more than structural elements such as buttons, text, images, lists, sliders, etc. A widget can display something, define a theme, adjust its layout, or handle user interaction. Layout rows and columns are also widgets, as are padding, margin, and center. We can assume that widgets are blueprints. Flutter uses these blueprints to create views. Again, remember that in Flutter, everything is a widget. The app itself is also a widget.

Widgets are either stateful or stateless. If a widget can change (for example, as the user interacts), it's stateful. Stateless widgets do not change. You'll find icons, icon buttons, and text among the stateless widgets.

Stateless Widget

Widgets whose state cannot be changed after creation are called stateless widgets. These widgets are immutable once created because changing variables, icons, buttons, or retrieving data cannot change the app's state. A stateless widget overrides the build() method and returns a widget. For example, use Text or Icon, Flutter applications whose widget state does not change at runtime. This is used when the user interface relies on information on the object itself. Other examples include Text, RaisedButton, and IconButtons.

Stateful Widget

A widget whose state can be changed after creation is called a stateful widget. These states are mutable and can change any number of times during their lifetime. This means that the state of your app can change many times with different sets of variables, inputs, and data. Stateful widgets override createState() and return State. They are used when the user interface can change dynamically. For example, CheckBox, RadioButton, Form, TextField, etc. Classes that inherit Stateful Widget are immutable. However, the state is mutable and changes as the user interacts at runtime.

What are the various types of Widgets?

Use the widget tree to create your user interface. Arrange widgets on top of each other to create simple and complex layouts. Almost everything in the Flutter framework is widgets, so your code can become difficult to follow when you start nesting them. The structure of the code of an app is a widget tree. There are mainly 14 types of widgets.

Accessibility

These are widgets that make Flutter apps easier to use.

Animation and Motion

These widgets are used to add animation to other widgets

Assets, Images, and Icons

These widgets inherit assets such as indicator images and indicator icons.

Async

These provide asynchronous functionality in Flutter applications.

Basics

These are the widgets that are necessary for developing Flutter applications.

Cupertino

These are widgets designed by ios.

Input

This group of widgets provides input functionality in Flutter applications.

Interaction Models

These widgets manage touch events and direct the user to different application views.

Layout

This bundle of widgets helps you place other widgets on the screen as needed.

Material Components

This is a set of widgets that primarily follows Google's Material Design.

Painting and Effects

This group of widgets applies visual changes to child widgets without changing layout or shape.

Scrolling

This provides scrolling functionality for many other widgets that are not scrollable by default.

Styling

This corresponds to the theme, responsiveness, and size of the app.

Text

This displays the text.

CX and UX are separate and unique. Both play an essential role in the overall success of a program, the reputation of your brand, and customers. Taken From Article, Comparing Customer Experience and User Experience

What is the Hierarchy of Widgets?

Hierarchy Widgets can be added to a layout as secondary components. Widgets display hierarchical relationships between records. A list of related records can be viewed by expanding each node in the hierarchy.

Proxy Widget

A ProxyWidget is a widget that provides a child widget instead of creating a new widget.

RenderObjectWidgets

RenderObjectWidgets provide a configuration of RenderObjectElements that wrap RenderObjects that provide the actual rendering of the application.

InheritedWidget

When an inherited widget is referenced in this way, the consumer will be recreated when its state changes.

Parent Data Widgets

The term unit testing is viral among developers. So in this blog, we will see what unit testing and floating terms are in common.

LeafRenderObjectWidget

LeafRenderObjectWidget is a superclass of RenderObjectWidgets that constitutes a RenderObject subclass with no children.

SingleChildRenderObjectWidget

SingleChildRenderObjectWidget is a superclass of RenderObjectWidgets that constitutes a RenderObject subclass with a single child slot.

MultiChildRenderObjectWidget

MultiChildRenderObjectWidget is a superclass of RenderObjectWidgets that constitutes a RenderObject subclass with a single child list.

A tool that enables end users, administrators and organizations to gauge and evaluate the performance of a given system. Taken From Article, Performance Monitoring Tools and Management

Conclusion

Modern frameworks inspired by React are used to build Flutter widgets. The central idea is to create a user interface out of widgets. Depending on the configuration and state of the view, widgets describe how it should look. When the widget's state changes, the widget regenerates its description. For example, suppose a state changes from one state to another. In that case, the framework checks it against previous descriptions to determine what minimal changes must be made in the underlying rendering structures. In computing, widgets are graphical user interface elements that display information or provide a particular way for users to interact with the operating system (OS) or applications.