Flutter, developed by Google, has rapidly gained popularity as a powerful framework for building cross-platform applications. One of the key features that sets Flutter apart is its extensive collection of widgets. In Flutter, everything is a widget, which simplifies development and enables developers to create beautiful, responsive user interfaces with ease.
Widgets are the building blocks of a Flutter application, representing everything from simple elements like text and images to complex layout structures and interactive components. Understanding and leveraging these widgets is essential for mastering Flutter development and building high-quality apps efficiently.
In this article, we’ll explore 25 handy Flutter widgets that every developer should know about. We’ll categorize them into three main sections: Basic Widgets, Layout Widgets, and Interactive Widgets, providing detailed insights and code examples for each.
Basic Widgets
In Flutter development, basic widgets serve as the fundamental building blocks for constructing user interfaces. These widgets encompass simple yet essential elements such as text, images, icons, and containers, providing developers with the foundational components needed to design visually appealing and interactive applications. From displaying textual content to arranging user interface elements in rows and columns, basic widgets lay the groundwork for creating seamless user experiences across various devices and platforms. Understanding and effectively utilizing these widgets is paramount for developers embarking on their Flutter journey, as they form the backbone of any successful app development endeavor.
1. Text
The Text widget is used to display a string of text in a Flutter application. It allows customization of text styling, including font, color, size, and alignment.
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)2. Image
Flutter provides the Image widget for displaying images from various sources, including assets, network URLs, and memory.
Image.asset('assets/images/flutter_logo.png')3. Icon
The icon widget is used to display Material icons in a Flutter application. Icons can be customized with size, color, and other properties.
Icon(
Icons.star,
color: Colors.yellow,
size: 30,
)4. Container
A container widget is a versatile widget used for layout and styling. It can contain a single child widget and allows customization of properties like padding, margin, color, and decoration.
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.symmetric(vertical: 10),
color: Colors.blue,
child: Text('Container Widget'),
)5. Row and Column
Row and column widgets are used for arranging child widgets horizontally and vertically, respectively. They provide flexibility in building responsive layouts.
Row(
children: [
Icon(Icons.email),
SizedBox(width: 10),
Text('example@email.com'),
],
)6. Scaffold
The scaffold widget serves as a layout structure for the majority of Flutter applications. It provides a framework for implementing basic material design visual layout structure, such as app bars, drawers, and bottom navigation bars.
Scaffold(
appBar: AppBar(title: Text('My App')),
body: Center(child: Text('Hello, Flutter!')),
)Layout Widgets
Layout widgets in Flutter play a crucial role in organizing and structuring the user interface elements of an application. These widgets enable developers to create visually appealing layouts that adapt to different screen sizes and orientations, ensuring a consistent and responsive user experience. Whether arranging widgets in a linear fashion with rows and columns, creating scrollable lists with ListView and GridView, or overlaying widgets with Stack and Positioned, layout widgets provide the flexibility and versatility needed to design complex and dynamic user interfaces. By mastering the usage of layout widgets, developers can achieve pixel-perfect designs and deliver engaging applications that seamlessly adapt to the diverse needs of users across various devices and platforms.
1. ListView
The listview widget is used to create a scrollable list of widgets. It efficiently handles large lists by lazily loading items as they are scrolled into view.
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
)2. GridView
Flutter’s gridview widget displays a scrollable grid of widgets in a two-dimensional arrangement. It supports both horizontal and vertical scrolling, with customizable grid layouts.
GridView.count(
crossAxisCount: 2,
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
Container(color: Colors.yellow),
],
)3. Stack
The stack widget allows widgets to be stacked on top of each other, enabling complex layout compositions. Widgets within a stack can be positioned relative to the edges or each other.
Stack(
children: [
Positioned(
top: 50,
left: 50,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Positioned(
top: 100,
left: 100,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
],
)4. Positioned
The positioned widget is used within a Stack to position its child widget relative to the stack’s edges or other children.
Stack(
children: [
Positioned(
top: 50,
left: 50,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
],
)5. Wrap
Flutter’s wrap widget is used to lay out its children in a horizontal or vertical direction, wrapping them to the next line if necessary. It’s useful for creating dynamic layouts with varying content sizes.
Wrap(
children: [
Chip(label: Text('Tag 1')),
Chip(label: Text('Tag 2')),
Chip(label: Text('Tag 3')),
],
)
Interactive Widgets
Interactive widgets are essential for creating engaging user experiences in Flutter applications. These widgets enable developers to capture user input, detect gestures, and respond to user actions effectively. Let’s explore some of the most useful interactive widgets in Flutter:
1. GestureDetector
The GestureDetector widget detects various gestures, including taps, swipes, and drags, on its child widget. It’s widely used for implementing custom interactions and navigation within Flutter apps.
GestureDetector(
onTap: () {
},
child: Container(
color: Colors.blue,
width: 200,
height: 200,
child: Center(child: Text('Tap me')),
),
)2. InkWell
Flutter’s InkWell widget provides a material design ripple effect when tapped. It’s commonly used for implementing clickable elements in Flutter UIs.
InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(10),
child: Text('Click me'),
),
)3. FlatButton
The FlatButton widget creates a button with a flat appearance, typically used for non-primary actions in an app.
FlatButton(
onPressed: () {
},
child: Text('Flat Button'),
)4. FloatingActionButton
Flutter’s FloatingActionButton widget represents a floating action button, often used for primary actions in an app, such as adding a new item or starting a new process.
FloatingActionButton(
onPressed: () {
},
child: Icon(Icons.add),
)5. IconButton
The IconButton widget creates a button with an icon, allowing users to perform actions with a single tap.
IconButton(
onPressed: () {
},
icon: Icon(Icons.settings),
)Material Design Widgets
Flutter provides a set of widgets that implement the material design guidelines, ensuring consistent and visually appealing UIs across different platforms. Let’s explore some of the key material design widgets:
1. AppBar
The AppBar widget represents a material design app bar, typically used as the top-level navigation element in Flutter applications.
AppBar(
title: Text('My App'),
actions: [
IconButton(
onPressed: () {
},
icon: Icon(Icons.search),
),
],
)2. BottomNavigationBar
Flutter’s BottomNavigationBar widget displays a horizontal row of tabs at the bottom of the screen, allowing users to switch between different views or pages in the app.
BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
)3. Drawer
The Drawer widget creates a material design navigation drawer that slides in from the side of the screen, providing access to app-wide options and settings.
Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
},
),
],
),
)4. Card
Flutter’s Card widget represents a material design card, used for displaying related content grouped together, such as images, text, and buttons.
Card(
child: ListTile(
leading: Icon(Icons.album),
title: Text('Card Title'),
subtitle: Text('Card Subtitle'),
onTap: () {
},
),
)5. Snackbar
The Snackbar widget displays a brief message at the bottom of the screen, typically used for showing notifications or feedback to the user.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Snackbar message'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
},
),
),
)Cupertino Widgets
Flutter’s Cupertino widgets mimic the design language of iOS, providing a familiar look and feel for users of Apple devices. Let’s explore some of the key Cupertino widgets:
1. CupertinoNavigationBar
The CupertinoNavigationBar widget represents a navigation bar styled according to iOS guidelines, typically used for top-level navigation in Flutter apps.
CupertinoNavigationBar(
middle: Text('Page Title'),
)2. CupertinoTabBar
Flutter’s CupertinoTabBar widget displays a row of tabs at the bottom of the screen, similar to iOS tab bars, allowing users to switch between different sections or views within the app.
CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
)3. CupertinoPicker
The CupertinoPicker widget creates a spinning wheel control, commonly used for selecting dates, times, or other options in iOS-style interfaces.
CupertinoPicker(
itemExtent: 30,
onSelectedItemChanged: (int index) {
},
children: [
Text('Option 1'),
Text('Option 2'),
Text('Option 3'),
],
)4. CupertinoActionSheet
Flutter’s CupertinoActionSheet widget displays a modal action sheet with a list of options, typically used for presenting a set of actions or choices to the user.
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) {
return CupertinoActionSheet(
title: Text('Action Sheet Title'),
actions: [
CupertinoActionSheetAction(
onPressed: () {
},
child: Text('Action 1'),
),
],
cancelButton: CupertinoActionSheetAction(
onPressed: () {
},
child: Text('Cancel'),
),
);
},
)5. CupertinoContextMenu
The CupertinoContextMenu widget creates a context menu that appears when a user long-presses on a widget, providing additional options or actions.
CupertinoContextMenu(
actions: [
CupertinoContextMenuAction(
child: Text('Option 1'),
onPressed: () {
},
),
],
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
)By leveraging these interactive, material design, and Cupertino widgets, Flutter developers can create intuitive user interfaces that deliver a seamless experience across different platforms.
Custom Widgets
In Flutter, custom widgets play a crucial role in building unique and tailored user interfaces. These widgets encapsulate specific functionalities or design patterns, promoting code reusability and maintainability. Let’s delve into some of the most useful custom widgets and explore their capabilities:
1. CustomScrollView
The CustomScrollView widget provides a flexible way to create scrollable layouts with custom scrolling behaviors. It allows developers to compose complex scrolling effects, such as parallax headers and sliver-based layouts.
CustomScrollView(
slivers: [
SliverAppBar(
title: Text('Custom Scroll View'),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
childCount: 20,
),
),
],
)2. SliverAppBar
Flutter’s SliverAppBar widget is used to create a material design app bar that integrates with a CustomScrollView. It supports various features like pinned headers, floating headers, and flexible space.
CustomScrollView(
slivers: [
SliverAppBar(
title: Text('Custom Scroll View'),
pinned: true,
),
],
)3. AnimatedBuilder
The AnimatedBuilder widget simplifies the process of animating properties of a widget. It allows developers to specify an animation and a builder function, automatically rebuilding the widget tree whenever the animation value changes.
AnimatedBuilder(
animation: _animationController,
builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: _animationController.value * 2 * pi,
child: child,
);
},
child: Icon(Icons.rotate_right),
)4. CustomPaint
Flutter’s CustomPaint widget enables custom drawing on the screen using a CustomPainter. It’s commonly used for creating custom shapes, charts, and graphical effects within Flutter applications.
CustomPaint(
painter: MyCustomPainter(),
child: Container(
width: 200,
height: 200,
),
)5. Tooltip
The Tooltip widget displays a tooltip message when the user hovers over or long-presses a widget. It’s useful for providing additional context or information about UI elements.
Tooltip(
message: 'This is a tooltip',
child: IconButton(
onPressed: () {
},
icon: Icon(Icons.info),
),
)Conclusion
In conclusion, Flutter’s extensive collection of widgets empowers developers to create sophisticated and intuitive user interfaces for their applications. From basic elements like text and images to complex layout structures and interactive components, Flutter widgets offer versatility and flexibility that streamline the app development process.
Throughout this article, we’ve explored 25 handy Flutter widgets across various categories, including Basic Widgets, Layout Widgets, Interactive Widgets, Material Design Widgets, and Cupertino Widgets. Each widget serves a specific purpose and can be customized to meet the unique requirements of different applications.
By mastering these widgets and understanding their capabilities, developers can unleash the full potential of Flutter and build high-quality apps that deliver exceptional user experiences. Whether you’re developing for Android, iOS, or the web, Flutter’s widgets provide the building blocks you need to bring your ideas to life.
As Flutter continues to evolve and grow, we can expect even more powerful widgets and features to enhance the development experience further. So, keep exploring, experimenting, and innovating with Flutter, and unlock endless possibilities for creating stunning applications.
With its rich ecosystem, vibrant community, and unparalleled performance, Flutter stands as a testament to the future of cross-platform app development. Embrace the power of Flutter widgets, and embark on a journey to build the next generation of mobile and web applications.
