18.10.

2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Flutter Widget Cheat Sheet: Your Ultimate Guide to

Building Stunning UI

April 8, 2024

Written and reviewed by: Muhammad Naeem

SHARE

Welcome to the ultimate Flutter widget cheat sheet! In this blog post,
I will share the Flutter widget cheat sheet that will help you
remember Flutter’s basic essential widgets. It will enhance your
Flutter development journey.

https://thetechvate.com/flutter-widget-cheat-sheet/ 1/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Table of Contents

Download Flutter Widget Cheat Sheet PDF Free

Subscribe to our newsletter to download the PDF for free! We’ll send the PDF
straight to your inbox.

SUBSCRIBE FOR FREE

1. Basic Layout widget

Scaffold:

A widget that provides a framework for implementing the basic

material design visual layout structure. It typically includes an app
bar, a body, and other optional features like drawers and floating
action buttons.

>>Check out Dart OOP Cheat Sheet

Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
)

Container:

A child widget is wrapped by this widget. It features properties like

alignment, padding, decoration, width, and height. It can be

https://thetechvate.com/flutter-widget-cheat-sheet/ 2/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

decorated with different shapes, borders, shadows, solid or gradient

colors, and so on.

Container(
decoration: BoxDecoration(),
padding: EdgeInsets.all(8),
alignment: Alignment.center,
child: Text('Hello, Flutter!'),
)

Column:

A widget that sets up its children widgets vertically. Unless you wrap
it with a scrollable widget, scrolling is not possible.

Column(
children: [
Text('First item'),
Text('Second item'),
],
)

Row:

A widget that sets up its children widgets horizontally. Unless you

wrap it with a scrollable widget, scrolling is not possible.

Row(
children: [
Text('First item'),
Text('Second item'),
],
)

Center:

https://thetechvate.com/flutter-widget-cheat-sheet/ 3/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

It is an align widget that centers its child widget and may adjust its
own size in response to the child’s dimensions

Center(
child: Text('Hello, Flutter!'),
)

Ink:

A widget that has a material ink feature. It creates an invisible ink

splash effect on interaction, such as taps.

Ink(
child: InkWell(
onTap: () {
// Handle tap
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text('Tap me'),
),
),
),
)

Stack:

A widget that allows you to stack multiple children on top of each

other. Children are positioned relative to the top-left corner of the
stack by default.

https://thetechvate.com/flutter-widget-cheat-sheet/ 4/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Positioned(
top: 50,
left: 50,
child: Text('Hello'),
),
Positioned(
bottom: 50,
right: 50,
child: Text('Flutter'),
),
],
)

Align:

A widget that aligns its child within itself according to a specified

alignment.

Align(
alignment: Alignment.center,
child: Text('Centered Text'),
)

Padding:

A widget that adds padding around its child.

Padding(
padding: EdgeInsets.all(20.0),

https://thetechvate.com/flutter-widget-cheat-sheet/ 5/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

child: Text('Padded Text'),

)

Transform:

A widget that applies a transformation to its child, such as

rotation, scaling, or translation.

Transform.rotate(
angle: math.pi / 4,
child: Text('Rotated Text'),
)

2. Widgets for responsiveness:

Expanded:

A widget that expands a child of a Row, Column, or Flex so that the

child fills the available space along the main axis.

Row(
children: [
Expanded(
child: Container(color: Colors.blue),
),
Expanded(
child: Container(color: Colors.green),
),
],
)

MediaQuery:

https://thetechvate.com/flutter-widget-cheat-sheet/ 6/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

A widget that provides information about the current app

dimensions, such as screen size and orientation.

final screenWidth = MediaQuery.of(context).size.width;

final screenHeight = MediaQuery.of(context).size.height;

Flexible:

A widget that adjusts its size to fit the available space based on the
flex factor.

Row(
children: [
Flexible(
flex: 2,
child: Container(color: Colors.blue),
),
Flexible(
flex: 1,
child: Container(color: Colors.green),
),
],
)

LayoutBuilder:

A widget that provides the parent widget’s constraints to its builder

function, allowing you to create layouts based on the available
space.

LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return DesktopLayout();
} else {
return MobileLayout();
https://thetechvate.com/flutter-widget-cheat-sheet/ 7/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

}
},
)

AspectRatio:

A widget that maintains a desired aspect ratio by resizing its child to

fit within the available space while preserving the aspect ratio.

AspectRatio(
aspectRatio: 16 / 9,
child: Container(color: Colors.blue),
)

FractionallySizedBox:

A widget that sizes its child to a fraction of the available space in

both width and height.

FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.3,
child: Container(color: Colors.blue),
)

3. Basic Interaction Widget:

GestureDetector:

A widget that detects gestures made by the user, such as taps,

drags, and swipes.

https://thetechvate.com/flutter-widget-cheat-sheet/ 8/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

GestureDetector(
onTap: () {
// Handle tap
},
child: Container(
color: Colors.blue,
child: Text('Tap me'),
),
)

InkWell:
A widget that provides a visual ink splash effect when tapped.

InkWell(
onTap: () {
// Handle tap
},
child: Container(
color: Colors.blue,
child: Text('Tap me'),
),
)

Draggable:

A widget that allows users to drag and move its child within the
parent widget.

Draggable(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(child: Text('Drag me')),
),
feedback: Container(
width: 100,
https://thetechvate.com/flutter-widget-cheat-sheet/ 9/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

height: 100,
color: Colors.blue.withOpacity(0.5),
child: Center(child: Text('Dragging')),
),
childWhenDragging: Container(),
)

CheckBox:

A widget that represents a checkbox which users can toggle between

checked and unchecked states.

Checkbox(
value: _value,
onChanged: (value) {
setState(() {
_value = value;
});
},
)

4. Basic Scrolling Widgets:

ListView:

A scrollable list of widgets arranged sequentially either vertically or

horizontally.

ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
],
)

https://thetechvate.com/flutter-widget-cheat-sheet/ 10/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

GridView:

A scrollable grid of widgets arranged in a two-dimensional layout.

GridView.count(
crossAxisCount: 2,
children: [
Text('Item 1'),
Text('Item 2'),
],
)

SingleChildScrollView:

A scrollable container that can hold only one child widget.

SingleChildScrollView(
child: Text('Scroll me!'),
)

PageView:

A scrollable list of pages, where each page occupies the full screen.

PageView(
children: [
Container(color: Colors.blue),
Container(color: Colors.green),
],
)

CustomScrollView:

https://thetechvate.com/flutter-widget-cheat-sheet/ 11/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

A scrollable container that allows you to create custom scrolling

effects by combining multiple scrollable widgets.

CustomScrollView(
slivers: [
SliverAppBar(
title: Text('App Bar'),
floating: true,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.network('https://example.com/image.jp
),
),
SliverList(
delegate: SliverChildListDelegate([
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
]),
),
],
)

NestedScrollView:

A scrollable container that allows you to nest scrolling widgets inside

each other, such as a ListView inside a ListView.

NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsSc
return [
SliverAppBar(
title: Text('App Bar'),
floating: true,
pinned: true,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.network('https://example.com/image.
),

https://thetechvate.com/flutter-widget-cheat-sheet/ 12/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

),
];
},
body: ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
)

5. Text Widgets:

Text:

A widget used to display a simple text on the screen.

Text('Hello, Flutter!')

RichText:

A widget used to display text with multiple styles and formatting

options.

RichText(
text: TextSpan(
text: 'Hello',
style: TextStyle(color: Colors.blue),
children: <TextSpan>[
TextSpan(text: ' Flutter', style: TextStyle(fontWeight: F
],
),
)

https://thetechvate.com/flutter-widget-cheat-sheet/ 13/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

SelectableText:

A widget used to display text that can be selected by the user.

SelectableText('Selectable Text')

6. Image Widget:

Image.asset:

A widget that displays an image included in your asset bundle.

Image.asset('assets/image.png')

Image.network:

A widget that displays an image obtained from a URL.

Image.network("Your Image URL");

FadeInImage:

A widget used to display a placeholder image while loading the final

image from the network.

FadeInImage.assetNetwork(
placeholder: 'assets/placeholder.png',

https://thetechvate.com/flutter-widget-cheat-sheet/ 14/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

image: 'https://example.com/image.jpg',
)
CircleAvatar:

A widget used to display a circular avatar image, commonly used for

user profile pictures.

CircleAvatar(
backgroundImage: AssetImage('assets/avatar.png'),
radius: 50,
)

7. Input and Controls:

TextField:

A widget used to allow users to input text.

TextField(
decoration: InputDecoration(
labelText: 'Enter your name',
),
)

Slider:

A widget used to allow users to select a value from a range by sliding

a thumb along a track.

Slider(
value: _sliderValue,

https://thetechvate.com/flutter-widget-cheat-sheet/ 15/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

onChanged: (value) {
setState(() {
_sliderValue = value;
});
},
)

Switch:

A widget used to allow users to toggle between two states, typically

on/off.

bool _value = false;

Switch(
value: _value,
onChanged: (value) {
setState(() {
_value = value;
});
},
)

Elevated Button:

A material design elevated button, when pressed, it elevates and

displays ink reactions.

ElevatedButton(
onPressed: () {
// Handle button press
},
child: Text('Press Me'),
)

Text Button:

https://thetechvate.com/flutter-widget-cheat-sheet/ 16/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

A material design text button, typically used for less prominent

actions.

TextButton(
onPressed: () {
// Handle button press
},
child: Text('Press Me'),
)

Outlined Button:

A circular material design floating action button, typically used for

primary actions in an app.

OutlineButton(
onPressed: () {
// Handle button press
},
child: Text('Press Me'),
)

FloatingAction Button:

A circular material design floating action button, typically used for

primary actions in an app.

FloatingActionButton(
onPressed: () {
// Handle button press
},
child: Icon(Icons.add),
)

Icon Button:

https://thetechvate.com/flutter-widget-cheat-sheet/ 17/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

A button widget that displays an icon, typically used for actions in an

app bar or toolbar.

IconButton(
icon: Icon(Icons.star),
onPressed: () {
// Handle button press
},
)

Conclusion:

In this blog post, we covered a variety of essential widgets and

concepts in Flutter for building user interfaces and handling user
interactions.

From basic layout widgets like Scaffold , Container , Column , and Row to
more advanced widgets for responsiveness like Expanded , Flexible ,
and MediaQuery , we explored how to create visually appealing and
adaptable UIs.

Additionally, we discussed widgets for handling user input such as

TextField , Checkbox , and Slider , as well as widgets for creating

interactive elements like GestureDetector , InkWell , and Draggable .

Finally, we covered widgets for scrolling content, including ListView ,

GridView , SingleChildScrollView , PageView , CustomScrollView , and

NestedScrollView . With these tools at your disposal, you can

efficiently develop robust and engaging Flutter applications. If you

have any further questions or suggestions for additional topics, feel
free to reach out!

CHECK OUT MORE FLUTTER BLOGS

https://thetechvate.com/flutter-widget-cheat-sheet/ 18/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

FAQ

1. What is the difference between GestureDetector and InkWell?

Both widgets detect user gestures like taps, but InkWell

provides a visual ink splash effect when tapped, while
GestureDetector does not.

2. How can I create responsive layouts in Flutter?

3.What is the purpose of the Transform widget?

4. How do I handle user input in Flutter?

5. What widgets can I use for scrolling content in Flutter?

WRITTEN AND REVIEWED BY

Muhammad Naeem
Professional Flutter Developer

SHARE

More Posts
Best 10 Flutter Voice Assistant, TTS, STT, And ASR Packages:
Why They Matter For Your App

https://thetechvate.com/flutter-widget-cheat-sheet/ 19/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Top 10 Flutter PDF Packages: The Ultimate Guide On PDF For

Flutter App

Top 10 Live Streaming And Realtime Communication

Packages In Flutter

5 Common Flutter Mistakes And How To Avoid Them

GetX State Management Cheat Sheet: The Ultimate Guide

To GetX State Management In Flutter

Join to our Family!

Subscribe to our weekly newsletter

Email Subscribe
B
ES
T

Convert your website to Mobile App using

D
EA
L

Flutter!
Grow your business three times faster!

https://thetechvate.com/flutter-widget-cheat-sheet/ 20/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Grab it Now

Related Post

Best 10 Flutter Voice Assistant, TTS, STT, and ASR Packages:

Why They Matter for Your App

https://thetechvate.com/flutter-widget-cheat-sheet/ 21/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Top 10 Flutter PDF Packages: The Ultimate Guide on PDF for

Flutter App

Top 10 Live Streaming and Realtime Communication Packages

in Flutter

https://thetechvate.com/flutter-widget-cheat-sheet/ 22/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

5 Common Flutter Mistakes and How to Avoid Them

GetX State Management cheat Sheet: The Ultimate Guide to

GetX State Management in Flutter

https://thetechvate.com/flutter-widget-cheat-sheet/ 23/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

START LEARNING

VISIT OUR STORE

10 Essential Flutter Tips for Beginners

Privacy Policy

Terms and Conditions

Quick Links

HOME
FLUTTER
STORE
ABOUT
CONTACT

Join our family!

Subscribe to our weekly newsletter to get awesome Flutter tips!

https://thetechvate.com/flutter-widget-cheat-sheet/ 24/25
18.10.2024 18:51 Flutter Widget Cheat Sheet: Your Ultimate Guide to Building Stunning UI - The Tech Vate

Get In Touch

Email Us [email protected]

Follow Us

Copyright © 202 4 All Rights Reserved The Tech Vate​

https://thetechvate.com/flutter-widget-cheat-sheet/ 25/25