Hello everyone! Today we will talk about widgets, the main components of Flutter applications.
What are widgets?
Let's consider a To-do List app created with Flutter. Our app has a list of items with checkboxes and texts (the to-do list), a button to add a new item, and a button to clear the list.
In this app, everything is a widget. Everything! They are the pieces that make up your UI and UX. The page is a widget, the list is a widget, and the checkboxes, the texts, and the buttons are also widgets. Everything you see marked in red is a widget:
Every Widget is an object with its properties, for example, the Text widget (which you'll use a lot) has the data property as well as its style. And, strange but true, its style is a Widget too :).
But, not all Widgets are the same or act the same. So let's divide them into more categories.
Different Widgets for different uses
Stateful vs. Stateless
The main distinction you'll see is Stateful and Stateless widgets:
Stateful widgets change over time due to user interactions or other factors. Examples of stateful widgets are TextField (which is just an input), Checkbox, and Slider;
Stateless widgets, on the other hand, are widgets that don't have "states", they don't change over time. Examples are Text, Image, and Icon.
If you read carefully what I wrote in the paragraph before, even pages (screens/views) are widgets. So even the pages in our app can be Stateful or Stateless. A Stateful page will probably have Stateful widgets inside it. It's like adding interaction to your app, passing from a simple static application to one you can modify and interact with.
Layout - UI - Input - Navigation - Styling - Platform Spec. Widgets
As you see from the heading, there are a lot of different widgets you can use in your app. Let's go through each one and explain it:
Layout widgets help the developer structure its components. These widgets can be visible and non-visible depending on the usage of the section of the app. Examples of Layout widgets are (you will learn their uses as you build apps):
Scaffold which is used to build the screen (page/view) of the app;
Row & Column which are used to order components in them (called children) in vertical/horizontal order;
Container which is a widget used to contain other widgets. The most common use is to decorate a section of the page;
Stack which is used to overlap multiple widgets;
List & SingleChildScrollView which are used to build lists;
Grid which is a simple grid (scrollable or not);
UI widgets are used to display information on the page and are the most common. For example:
Text used to display a text;
Image used to show an image;
Icon to add an icon to the page;
Card, a specific container widget with its properties;
Input widgets are used to gather information from the user and they are:
TextField which is a simple text input
Button a simple button. There are multiple types of buttons in Flutter;
Checkbox / Radio to gather a boolean info;
Navigation widgets are used to manage routes through the pages of your application. The most used are 3:
Navigator which directs routes. It is used to open up or close pages and temporary dialogs;
Bottom Navigation Bar is used as a bar on the bottom of the page to navigate through pages easily;
Tab Bar is similar to the bottom navigation bar but allows navigation through tabs;
Styling widgets are used to decorate and give style to other widgets. Here are some:
Theme to define the app theme (colors, fonts, and more);
TextStyle to define the style of a text;
Decoration / BoxDecoration to give style to a container or other layout widgets. This is why a layout widget can be visible and invisible because we can always give it a background color or a border etc.
Platform Specific widgets adapt to the OS we are running the app on:
Material is used for Android devices;
Cupertino for iOS and MacOS devices;
That's it for this post, I hope you learned something about Widgets and, if not, you will surely learn from the app we're gonna create.
For now, stay safe!