Flutter: Widget Catalog

Share on facebook
Share on google
Share on twitter
Share on linkedin

Widget Catalog

In this article, you will learn about Flutter widgets and how to code the widget. The following also covered in this article:

  • Goal 1: Introduction
    • What is Flutter?
    • What is a widget?
  • Goal 2: Widget
    •  List of widgets
    • Function of each widget
  • Goal 3: Code Along
    • Example code

Goal 1: Introduction

What is Flutter?

Flutter is Google’s portable UI toolkit. Flutter also allows developers to create stunning, natively built applications from a single codebase for desktop, mobile, and the web. In easy words, it means that one codebase can be used to develop an application for all platforms; less time consuming.

What is a widget?

Each element on a screen of the Flutter app is a widget. By this, it means that anything that a user can see on their UI is a widget.

Goal 2: Widget

List of widgets

The list of widgets that will be explained are listed below.

  • Scaffold
  • AppBar
  • Container
  • Row & Column
  • Icon
  • Image
  • Card
  • Text
  • TextField
  • Button

The function of each widget

  1. Scaffold – Scaffold is usually a very top-level widget, one that gives the main outline of an app. Mainly responsible for creating a base tothe app screen on which the child widgets hold on and render on the screen.
  • As shown in the above picture, the whole screen is in the Scaffold widget which acts as a base of the whole screen.
  • 2. AppBar – AppBar is the widget that literally represents the app bar (the top bar) of an application. It can host stuff like a title, a logo, and action icons.
  • 3. Container is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc.
  • 4. Row & Column
    • Row: A widget that displays its children in a horizontal array.

    • Column: A widget that displays its children in a vertical array.

5. Icon is a graphic image representing an application or any specific entity containing meaning for the user. It can be selectable and non-selectable.

6. Image – Image is used to display a graphic image such as a company logo, photo, or illustration, in PNG, JPEG, WebP, GIF or in any format, in an application.

7. Card – Card is a sheet used to represent the information related to each other. This widget’s functionality is shown by the fact that it is a plain area or panel with rounded corners and a modest elevation on the lower side of the screen.

8. Text – Text widget is used to display a string of text with a single style. We can split the string across numerous lines or display it entirely on one line, depending on the layout restrictions.

9. TextField – TextField is an input element which holds the alphanumeric data, such as name, password, address, etc. It is a GUI control element that enables the user to enter text information.

10. Button – Button is the graphical control element that provides a user to trigger an event such as taking actions, making choices, searching things, and many more. Following are the different types of buttons available in Flutter:

    • Flat Button
    • Raised Button
    • Floating Button
    • Drop Down Button
    • Icon Button
    • Inkwell Button
    • PopupMenu Button
    • Outline Button

Goal 3: Code Along

Example code:

  1. Scaffold & AppBar


2. Container


3. Row and Column

Below is the example code and output for column widget. For Row widget, you just need to change the Column to Row.


4. Icon

5. Image

6. Text

7. Textfield

8. Button

For deep understanding on this topic let’s watch the video above, happy watching!

Scroll to Top