Introduction to Flutter Widgets

Uhm! So what are widgets in flutter?

Short answers

• Every UI display element is a widget
• If you’re from a React, Vue or Angular background, think of Widget as a Component
• You can also think of Widget as re-usable code displayed to the user

Long Answer

A widget in the Flutter programming language is a segment of code that simulates a visual element or a structural element in an app's user interface (UI). A Flutter app is made out of reusable sections (Widgets), which may be combined to make intricate and aesthetically pleasing layouts..

There are two types of widgets in Flutter: stateless and stateful.

Stateless widget

Stateless widgets are immutable, which means that once they are formed, their properties cannot be altered. These widgets are effective and lightweight, making them appropriate for UI elements that are static and never need to change. Text, pictures, and icon widgets are a few examples of stateless widgets.

Stateful widget

On the other hand, stateful widgets have the ability to alter their state over time and can be redrawn on the screen when this occurs. These widgets are often used for user interface (UI) interactive features that require user input or data changes from the program. Button, text-field, and slider widgets are a few examples of stateful widgets.

Visual Explanation

We would explain these two concepts in details in the subsequent shows.

Here are some references that you may find useful for learning more about widgets in Flutter:

• Flutter documentation on widgets: https://docs.flutter.dev/development/ui/widgets
• Flutter tutorial on building a basic app with widgets: https://docs.flutter.dev/get-started/codelab