Flutter Does That - An Overview of Flutter Widgets (A Series)

I am super excited to start this “Flutter Does That” series where I demystify complex programming concepts into simple, perceptible, and comprehensible modules to aid your understanding and appreciation of these concepts. show you how you can co opt some really cool functionalities into your projects. I understand how important your time is, and so I am going to try as much as possible to go straight to the point as much as I try to cover the key areas in the lecture. Let’s begin our trip!


What is a Flutter Widget?
Widgets are the building blocks of a Flutter app’s user interface, and this is because without them, you can’t create. A widget is what holds the configuration that you provide for the user interface. You can think of Flutter widgets as a blueprint and Flutter uses these blueprints to construct the view elements behind the scenes and render them to the screen.

Flutter Apps are built by nesting widgets inside each other and this gives rise to the Widget Tree. In Flutter, a Widget Tree describes the structure of widgets inside your app.

There are loads of widgets prebuilt into the Flutter Framework that you can use out of the box, like the Text widget, Icon widget, Row widget, Column widget, Image widget, etc., to lay out your app. Each of those widgets is fully customizable, and we can pass in different properties to those widgets to alter how they display on the screen. For example, our Text widget could have a style* property to style how it looks, the textAlign* property to specify how the text should be aligned horizontally, the overflow* property to define how the visual overflow should be handled, etc. The Icon widget could also have a color* property to define the color to use when drawing the icon, a size* property to specify the size of the icon in logical pixels, etc.

It might interest you to know that all widgets in Flutter are classes, and each widget has its own programmed class which defines its behavior and how it looks on the screen. We implement the widget tree structure in Flutter by using a programming language called “Dart”. Dart is a programming language designed for client development, such as for the web and mobile apps. and can also be used to build server and desktop applications. Dart is an object-oriented, class-based programming language. For those of you who are not quite familiar with Flutter, this lecture series is called “Flutter Does That” because Flutter uses a programming language called “Dart” and I wanted to play with words a little.

Types of Flutter Widgets
There are two broad types of widgets in Flutter that I want to talk about: The Stateless widgets, and the Stateful widgets. Before I explain the widget types, let me explain what “State” is, so you can understand clearly.

State: State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when the state changes to trigger a rebuild of the user interface. State can simply be described as "whatever data you need in order to rebuild your UI at any moment in time". Flutter is declarative, this means that Flutter builds its user interface to reflect the current state of your app.

Stateless Widgets: The Stateless widgets do not require mutable state, that means they are not subject to change. A Stateless widget describes part of the user interface by building a constellation(collection) of other widgets that describe the user interface more concretely. The building process continues recursively(repeatedly) until the description of the user interface is fully concrete. Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the BuildContext for the widget.

Stateful Widgets: A Stateful widget has mutable state, that means it is subject to change. This simply means the state of an app can change multiple times with different sets of variables, inputs, and data. You can change the UI of this widget without building it again with the help of the setState method. Stateful widgets are useful when the part of the user interface you are describing can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state.

I could go further to tell you how the Stateless and Stateful widgets work, show you how to use them and more, but then I have promised to break the lectures into several parts to make the learning curve interesting. I do not want to overcomplicate and inflate the “Flutter Does That” lecture series. In further lectures, I am going to explain how Flutter renders widgets, and have a breakdown of the widget tree and element. I will have very brief sections of this series where I pick up specific Flutter widgets and show you how to implement them in your project.

What you can do from here is to look up the flutter documentation and familiarize yourself with whatever you want to learn about. I am hoping to give you a smooth, yet adventurous ride as we build great features together. Cheers!

I think you should have started with dart. It is a very important component in learning flutter.
✌️

Thanks for the information. But the way, my friend recently discover a cool service that helped him to create mobile application development for his company. And he was very satisfied results and they help to build a high-quality app system aligned with his business and security requirements.

Thank you for the contribution. I discovered it would be difficult to have a full blown tutorial on dart and flutter since I might not be able to keep up with it. That is why I decided to make the series to target people who already have base knowledge of what Flutter is about, but seek further understanding of specific concepts and want to see how they could add really cool features to their projects.

cringeAlpha:
I think you should have started with dart. It is a very important component in learning flutter.
✌️