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 and 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!