Flutter is a popular open-source mobile application development framework that allows developers to create high-performance, visually appealing, and responsive mobile applications for both Android and iOS platforms. One of the key features of Flutter is its extensive collection of widgets, which are the building blocks of any Flutter application.
Widgets in Flutter are essentially UI components that can be used to create various elements of an application, such as buttons, text fields, images, and more. These widgets are highly customizable and can be easily modified to suit the specific needs of an application.
Flutter widgets are divided into two categories: stateless and stateful. Stateless widgets are those that do not change over time, while stateful widgets are those that can change based on user interactions or other events.
Some of the most commonly used Flutter widgets include:
- Text: This widget is used to display text on the screen. It can be customized with various fonts, colors, and styles.
- Image: This widget is used to display images on the screen. It supports various image formats and can be customized with different sizes and shapes.
- Button: This widget is used to create clickable buttons that perform specific actions when pressed.
- TextField: This widget is used to create text input fields that allow users to enter text.
- ListView: This widget is used to create scrollable lists of items.
- Container: This widget is used to create a rectangular container that can be customized with various colors, borders, and padding.
Flutter widgets are easy to use and can be combined to create complex UI elements. They are also highly performant, which means that Flutter applications can run smoothly even on low-end devices.
This cheat sheet provides an overview of the most commonly used Flutter widgets. For more detailed information, please refer to the official Flutter documentation. You’ll find a link below the cheat sheet. Enjoy!
Basic Widgets
| Widget | Description |
|---|---|
Text | Displays a string of text |
Image | Displays an image |
Icon | Displays an icon |
Container | A box that can contain other widgets |
Row | A horizontal layout |
Column | A vertical layout |
Stack | A widget that positions its children relative to the edges of its box |
Expanded | A widget that expands to fill the available space |
Scaffold | A basic layout structure for apps |
Input Widgets
| Widget | Description |
|---|---|
TextField | A widget that allows the user to enter text |
Checkbox | A widget that allows the user to select one or more options |
Radio | A widget that allows the user to select one option from a group |
Switch | A widget that allows the user to toggle a setting on or off |
Slider | A widget that allows the user to select a value from a range |
DropdownButton | A widget that displays a list of options for the user to choose from |
Layout Widgets
| Widget | Description |
|---|---|
Padding | Adds padding around a widget |
Align | Positions a widget within its parent |
AspectRatio | Sets the aspect ratio of a widget |
ConstrainedBox | Constrains the size of a widget |
FittedBox | Scales a widget to fit within its parent |
FractionallySizedBox | Sizes a widget based on a fraction of its parent |
IntrinsicHeight | Sizes a widget to its intrinsic height |
IntrinsicWidth | Sizes a widget to its intrinsic width |
LimitedBox | Limits the size of a widget |
Offstage | Hides a widget from view |
OverflowBox | Allows a widget to overflow its parent |
SizedBox | Sets the size of a widget |
Transform | Applies a transformation to a widget |
Material Design Widgets
| Widget | Description |
|---|---|
AppBar | A top app bar |
BottomAppBar | A bottom app bar |
BottomNavigationBar | A bottom navigation bar |
Card | A material design card |
Chip | A material design chip |
Divider | A horizontal line |
FloatingActionButton | A floating action button |
ListTile | A material design list tile |
SnackBar | A material design snack bar |
TabBar | A material design tab bar |
TextField | A material design text field |
Cupertino Design Widgets
| Widget | Description |
|---|---|
CupertinoActionSheet | A Cupertino-style action sheet |
CupertinoActivityIndicator | A Cupertino-style activity indicator |
CupertinoButton | A Cupertino-style button |
CupertinoDatePicker | A Cupertino-style date picker |
CupertinoDialog | A Cupertino-style dialog |
CupertinoNavigationBar | A Cupertino-style navigation bar |
CupertinoPageScaffold | A Cupertino-style page scaffold |
CupertinoPicker | A Cupertino-style picker |
CupertinoSlider | A Cupertino-style slider |
CupertinoSwitch | A Cupertino-style switch |
CupertinoTabBar | A Cupertino-style tab bar |
CupertinoTextField | A Cupertino-style text field |