Flutter has become a popular framework for developing mobile applications. Its rich set of widgets makes it easy to create beautiful, fast, and responsive mobile apps. In this article, we will discuss the top 10 Flutter widgets that can help you build your app's user interface efficiently.
Top 10 Flutter Widgets Every Developer Should Know:
1. Text Widget
The Text widget is the most basic widget that displays text on the screen. It is highly customizable and allows you to change the font size, color, and alignment. You can use it to display headings, paragraphs, and even buttons. You can also add styling to text using the RichText widget, which allows you to add multiple styles to a single block of text.
Example:
Text(
'Welcome to my app!',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
2. Image Widget
The Image widget displays images on the screen. It supports various image formats, such as PNG, JPEG, and GIF. You can also use it to display images from the internet by providing the image URL. The Image widget also supports advanced features such as caching, image resizing, and loading indicators.
Example:
Image.network(
'https://example.com/images/my_image.jpg',
fit: BoxFit.cover,
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
: null,
),
);
},
),
3. Container Widget
The Container widget is a multi-purpose widget that allows you to create a box with padding, margins, and border. It is highly customizable and can be used to create complex layouts. You can also use the Container widget to add background colors, gradients, and images to your layout.
Example:
Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text('Hello World!'),
),
4. Row and Column Widget
The Row and Column widgets are used to create horizontal and vertical layouts, respectively. You can use them to arrange widgets in a row or column and adjust their spacing and alignment. The Row and Column widgets also support advanced features such as expanded children, flexible children, and wrapped children.
Example:
Row(
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 3'),
),
],
),
5. ListView Widget
The ListView widget is used to display a list of items that can be scrolled vertically or horizontally. It is highly customizable and can be used to create complex lists with different types of items. You can also use the ListView widget to add pull-to-refresh and infinite scrolling to your list.
Example:
ListView(
children: [
ListTile(
leading: Icon(Icons.person),
title: Text('John Doe'),
subtitle: Text('john.doe@example.com'),
),
ListTile(
leading: Icon(Icons.person),
title: Text('Jane Doe'),
subtitle: Text('jane.doe@example.com'),
),
ListTile(
leading: Icon(Icons.person),
title: Text('Bob Smith'),
subtitle: Text('bob.smith@example.com'),
),
],
),
6. Stack Widget
The Stack widget allows you to stack widgets on top of each other. It is commonly used to create overlays, such as displaying a loading indicator over an image. You can also use the Stack widget to create complex layouts with overlapping widgets.
Example:
Stack(
children: [
Image.network(
'https://example.com/images/my_image.jpg',
fit: BoxFit.cover,
),
Center(
child: CircularProgressIndicator(),
),
],
),
7. Card Widget
The Card widget is used to display information in a stylized box with rounded corners. It is commonly used to display information, such as product details or news articles. The Card widget also supports advanced features such as elevation, border radius, and shadow.
Example:
Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: Column(
children: [
Image.network(
'https://example.com/images/my_product.jpg',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Product',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'\$19.99',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
ElevatedButton(
onPressed: () {},
child: Text('Add to cart'),
),
],
),
],
),
),
],
),
),
8. AppBar Widget
The AppBar widget displays a top app bar with a title and optional actions. It is commonly used to create a navigation bar for your app. You can also customize the AppBar widget by adding background colors, images, and icons.
Example:
AppBar(
title: Text('My App'),
actions: [
IconButton(
9. FloatingActionButton Widget
The FloatingActionButton widget displays a circular button that performs a primary action in your app. It is commonly used to create a call-to-action button, such as a "add to cart" button. You can also customize the FloatingActionButton widget by adding background colors, images, and icons.
Example:
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
10.TextFormField Widget
The TextFormField widget is used to create a text input field with validation and error messages. It is commonly used to create forms, such as a login or registration form. You can also customize the TextFormField widget by adding custom validators, input masks, and keyboard types.
Example :
TextField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
prefixIcon: Icon(Icons.email),
border: OutlineInputBorder(),
),
),
Conclusion
Flutter provides a rich set of widgets that makes it easy to create beautiful and responsive mobile apps. The widgets listed above are just the tip of the iceberg, and there are many more widgets available that can help you build your app's user interface efficiently. By using these widgets, you can create complex layouts and UI elements with ease. The Flutter documentation provides comprehensive examples and tutorials for each widget, allowing you to quickly learn and implement
