Flutter: 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

Output:

2. Container

Output:

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.

Output: 

4. Icon

5. Image

6. Text

7. Textfield

8. Button

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