Flutter Widgets Cheatsheet: Categories, Types and Basic Widgets

Flutter is Google’s UI toolkit for crafting beautiful, natively compiled iOS and Android apps using a single code base. The Flutter app is designed using widgets – These are the basic building blocks of every Flutter application. Widgets describe what the app UI should look like given its current configuration and state.

There are multiple Flutter widgets, the articles give you a quick look into the basic Flutter widgets, types, and categories. 

Flutter has become a star in the eyes of Android and iOS developers by empowering them to build cross-platform apps using a single codebase. The technology seems to be successfully overcoming the three big challenges in app development. 

• There is no need to have separate teams for Android and iOS development, just hire one team and implement the cross-platform development functionality of Flutter. 
• Improves productivity and speeds up development with Dart’s “Just in Time” and “Ahead of  Time” compilation. And thus it helps to reduce the development cost to half.
• Unlike other cross-platform options, Flutter makes the app more beautiful, stable, and consistent. 

All that brings much relief for the developer's community as they now have more time for creative things in app development. 

Well, now we know how useful Flutter is for smoothly building beautiful cross-platform apps. Let's know about the basic building blocks of the Flutter application known as Flutter widgets. 

Flutter Widgets: 

Each element on the Flutter UI is a widget such as text, container, image, button, animations, and motions. So, the view of a screen completely depends on the choice and the sequence of the Flutter widgets used in building the application. Therefore the structure formed by the application code is called a tree of widgets. 

These widgets can be classified into the following fourteen  categories according to the functionality they provide in the Flutter application.

‍

Category	Description
Accessibility	Makes the app more accessible.
Animation and motions	Add animation to the widgets.
Assets image and icon	Manage assets, display images, and show icons.
Async	Provides async functionality to the Flutter application.
Basics	Essential widgets for the Flutter application development.
Cupertino	Beautiful and high-fidelity widgets for iOS styling.
Input	Take user input in addition to input widgets in Material Components and Cupertino.
Interaction Models	Respond to touch events and route users to different views.
Layout	Arranges other widgets, columns, rows, grids, and other layouts.
Material Components	Visual, behavioral, and motion-rich widgets that follow material design guidelines.
Painting and Effects	Set of widgets that add visual changes to their child widgets without changing their layout and shape.
Scrolling	Scrolls multiple widgets as the children of the parents.
Styling	It deals with the theme, responsiveness, and sizing of the app.
Text	It displays and styles text.

‍

Flutter Widget Types

In general Flutter widgets are classified into two categories,

1. Stateless Widget 2. Stateful Widget

However, you can find more classes in the hierarchy of Flutter sources. 

Flutter Widget Types

• StatelessWidget: The widget does not require a mutable state. 

• StatefulWidget: The widget has a mutable state i.e state information can be read synchronously when it is built and it may change during the widget's lifetime. Therefore it's essential to ensure that the state is promptly notified when the change occurs using setState.   

• ProxyWidget: The Widget has a child widget provided to it, instead of building a new widget. It is useful as a base class for other widgets like InheritedWidget and ParentDataWidget. 

• RenderObjectWidget: It provides the configuration for the RenderObjectElements, which wrap RenderObjects, that provide the actual rendering of the application.

• InheritedWidget: It is a base class for widgets that efficiently propagates information down the tree. To obtain the near instance of a particular type of inherited widget from a build context, use BuildContext.dependOnInheritedWidgetOfExactType . When referenced in this way, it causes the consumer to rebuild when the inherited widget itself changes state. 

• ParentDataWidget:  It is a base class for a widget that hooks ParentData information to children of RenderObjectWidgets.  It is used to provide a per-child configuration for RenderObjectWidgets  with more than one child.  

• LeafRenderObjectWidget: It is a superclass for RenderObjectWidgets that configure RenderObject subclasses that have no children.

• SingleChildRenderObjectWidget: It is a superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single child slot.

• MultiChildRenderObjetWidget: It is a superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single list of children.

• _NullWidget: Zero cost widget. Use it when you need a placeholder.

Most commonly used Flutter Widgets with the example 

1. AppBar

A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.

Code Example:

1Dart
2import 'package:flutter/material.dart';
3
4
5/// Flutter code sample for [AppBar].
6
7
8void main() => runApp(const AppBarApp());
9
10
11class AppBarApp extends StatelessWidget {
12  const AppBarApp({super.key});
13
14
15  @override
16  Widget build(BuildContext context) {
17    return const MaterialApp(
18      home: AppBarExample(),
19    );
20  }
21}
22
23
24class AppBarExample extends StatelessWidget {
25  const AppBarExample({super.key});
26
27
28  @override
29  Widget build(BuildContext context) {
30    return Scaffold(
31      appBar: AppBar(
32        title: const Text('AppBar Demo'),
33        actions: <Widget>[
34          IconButton(
35            icon: const Icon(Icons.add_alert),
36            tooltip: 'Show Snackbar',
37            onPressed: () {
38              ScaffoldMessenger.of(context).showSnackBar(
39                  const SnackBar(content: Text('This is a snackbar')));
40            },
41          ),
42          IconButton(
43            icon: const Icon(Icons.navigate_next),
44            tooltip: 'Go to the next page',
45            onPressed: () {
46              Navigator.push(context, MaterialPageRoute<void>(
47                builder: (BuildContext context) {
48                  return Scaffold(
49                    appBar: AppBar(
50                      title: const Text('Next page'),
51                    ),
52                    body: const Center(
53                      child: Text(
54                        'This is the next page',
55                        style: TextStyle(fontSize: 24),
56                      ),
57                    ),
58                  );
59                },
60              ));
61            },
62          ),
63        ],
64      ),
65      body: const Center(
66        child: Text(
67          'This is the home page',
68          style: TextStyle(fontSize: 24),
69        ),
70      ),
71    );
72  }
73}
74

Output:

AppBar

2. Column

Layout a list of child widgets in the vertical direction.

Code Example:

1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(
5    const MaterialApp(
6      home: Scaffold(
7        body: Center(
8          child: Column(
9            mainAxisAlignment: MainAxisAlignment.center,
10            children: <Widget>[
11              const Text('Hello, World!'),
12              const Text('Welcome to Flutter'),
13            ],
14          ),
15        ),
16      ),
17    ),
18  );
19}
20

Output:

Column

3. Container

A convenience widget that combines common painting, positioning, and sizing widgets.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3  runApp(
4    MaterialApp(
5      home: Scaffold(
6        body: Center(
7          child: Container(
8            width: 200,
9            height: 200,
10            color: Colors.blue,
11            child: const Text('Hello, Container!'),
12          ),
13        ),
14      ),
15    ),
16  );
17}
18

Output:

Container

4. ElevatedButton

A Material Design elevated button. A filled button whose material elevates when pressed.

Code Example:

1import 'package:flutter/material.dart';
2
3
4void main() {
5  runApp(
6    MaterialApp(
7      home: Scaffold(
8        body: Center(
9          child: ElevatedButton(
10            onPressed: () {
11              // Button click logic here
12              print('Button pressed');
13            },
14            child: const Text('Click me'),
15          ),
16        ),
17      ),
18    ),
19  );
20}
21

Output:

ElevatedButton

5. FlutterLogo

The Flutter logo, in the widget form. This widget respects the IconTheme.

Code Example:

1import 'package:flutter/material.dart';
2
3
4void main() {
5  runApp(
6    MaterialApp(
7      home: Scaffold(
8        body: Center(
9          child: FlutterLogo(
10            size: 100, // Adjust the size as needed
11            style: FlutterLogoStyle.stacked, // Choose the style: stacked, horizontal, or markOnly
12            textColor: Colors.blue, // Set the color of the text (if applicable)
13          ),
14        ),
15      ),
16    ),
17  );
18}
19

Output:

FlutterLogo

6. Icon

A Material Design icon.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3  runApp(
4    MaterialApp(
5      home: Scaffold(
6        body: Center(
7          child: Icon(
8            Icons.favorite,
9            color: Colors.red,
10            size: 48,
11          ),
12        ),
13      ),
14    ),
15  );
16}
17

Output:

Icon

7. Image

A widget that displays an image.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3  runApp(
4    MaterialApp(
5      home: Scaffold(
6        body: Center(
7          child: Image.network('https://media.licdn.com/dms/image/dhiwise_logo?e=1731542400&'),
8        ),
9      ),
10    ),
11  );
12}
13

Output:

Image

8. Placeholder

A widget that draws a box that represents where other widgets will one day be added.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3  runApp(
4    MaterialApp(
5      home: Scaffold(
6        body: Center(
7          child: Placeholder(
8            fallbackWidth: 100,
9            fallbackHeight: 100,
10            color: Colors.red.shade300, 
11            strokeWidth: 1.0,
12          ),
13        ),
14      ),
15    ),
16  );
17}
18

Output:

Placeholder

9. Row

Layout a list of child widgets in the horizontal direction.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3  runApp(
4    MaterialApp(
5      home: Scaffold(
6        body: Center(
7          child: Row(
8            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
9            children: [
10              Text('Hello'),
11              Icon(Icons.favorite),
12              ElevatedButton(onPressed: () {}, child: Text('Button')),
13            ],
14          ),
15        ),
16      ),
17    ),
18  );
19}
20

Output:

Row

10. Text

for displaying strings of text. It provides basic styling options to control the appearance of the text.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3  runApp(
4    MaterialApp(
5      home: Scaffold(
6        body: Center(
7          child: Text(
8            'Hello, world!',
9            style: TextStyle(
10              fontSize: 24,
11              fontWeight: FontWeight.bold,
12              color: Colors.blue,
13            ),
14          ),
15        ),
16      ),
17    ),
18  );
19}
20

Output:

Text

‍Also, read our article on medium to know about the popular animation widgets for creating an intuitive UI.

And here you have it; everything about the Flutter widgets!! Hope you find it useful to get a quick view of Flutter's basic widgets, categories, and types.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.