Flutter is an open-source UI software development kit (SDK) for modern mobile application development, developed by Google. Flutter allows you to write high-performance native applications for both iOS and Android platforms from a single codebase. This advantage has made Flutter a preferred choice for many developers. In this article, we will take a closer look at the various types of widgets provided by Flutter. Widgets are the core components of Flutter and the basic building blocks of the UI.
1. Understanding Flutter Widgets
In Flutter, a ‘widget’ is a component of the UI that is displayed on the screen. Everything is a widget; buttons, texts, images, etc., are all represented as widgets. Flutter has two basic types of widgets: Stateless Widgets and Stateful Widgets.
1.1 Stateless Widget
A Stateless Widget is used to create a UI that does not change. This widget does not change its state after creation, and even if the input values change, the UI does not get updated. For example, simple elements like Text, Icon, and Image fall into this category. Here is a simple example of a Stateless Widget:
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello World');
}
}1.2 Stateful Widget
A Stateful Widget is used to create UI elements that can change state based on user interactions. Stateful Widgets store and manage their internal state and update the UI whenever that state changes. These widgets are useful for handling changes caused by button clicks or text input. Below is an example of a Stateful Widget:
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $_counter'),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
} 2. Basic Widgets
Flutter provides many basic widgets. These widgets can be combined to create complex UIs. The types of basic widgets include the following.
2.1 Text Widget
The Text Widget displays a string on the screen. You can set text styles, size, alignment, and more. The basic usage is as follows:
Text(
'Hello Flutter',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
);2.2 Image Widget
The Image Widget is used to display images. It can display both local and network images, and the usage is as follows:
Image.network('https://example.com/image.png');2.3 Icon Widget
The Icon Widget is a simple widget that can display icons from FontAwesome, Material icons, and other sources.
Icon(Icons.favorite, color: Colors.red);2.4 Button Widget
Flutter has various button widgets. The most commonly used buttons include ElevatedButton, TextButton, OutlinedButton, and so on.
ElevatedButton(
onPressed: () {
// Code to execute when the button is clicked
},
child: Text('Click Me!'),
);3. Layout Widgets
Layout Widgets are used to position other widgets. These widgets are essential for forming the structure of the UI.
3.1 Column and Row
The Column widget arranges widgets vertically, while the Row widget arranges them horizontally. You can combine them to create grid-like UIs.
Column(
children: [
Text('First Item'),
Text('Second Item'),
],
);3.2 Container
The Container widget wraps other widgets and allows you to set margins, padding, background color, size, and more.
Container(
padding: EdgeInsets.all(8.0),
color: Colors.blue,
child: Text('Inside Container'),
);3.3 ListView and GridView
ListView and GridView are used to create scrollable lists and grids. They allow you to efficiently display large amounts of data.
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
],
);4. Advanced Widgets
Flutter also provides advanced widgets that can be used to construct more complex UIs. These widgets support various features such as user interactions, animations, and dialogs.
4.1 Dialog
A dialog is a popup used for interacting with the user. AlertDialog is a basic dialog that can include a message and buttons.
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Title'),
content: Text('This is a dialog message.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);4.2 Animation
Flutter supports animations and transitions, adding vibrancy to various UI changes. You can easily add animation effects using animation widgets like AnimatedContainer.
AnimatedContainer(
duration: Duration(seconds: 2),
color: _isBlue ? Colors.blue : Colors.red,
width: 200,
height: 200,
);5. Custom Widgets
In Flutter, developers can also create and use custom widgets. Creating custom widgets enhances code reusability and readability and enables efficient management of complex UIs.
class MyCustomWidget extends StatelessWidget {
final String title;
MyCustomWidget(this.title);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(title, style: TextStyle(fontSize: 24)),
);
}
}Conclusion
As we have seen above, Flutter has a wide variety of widgets, each performing specific functions. Understanding the difference between Stateless and Stateful widgets, and learning how to use various basic and advanced widgets to construct complex UIs is an important first step to becoming a Flutter developer. If you have built a foundational knowledge of widgets through this article and learned how to create custom widgets, it will greatly help you leverage Flutter more effectively. Understand the types of Flutter widgets and their usage to develop attractive mobile applications.