Widgets in Flutter: The Building Blocks of UI

Batoolshanzay
2 min readFeb 4, 2025

--

Flutter, the open-source UI software development kit by Google, has revolutionized mobile app development with its fast rendering engine and expressive UI. One of the fundamental aspects of Flutter development is widgets. Everything in Flutter, from a simple button to a complex animation, is a widget.

In this blog, we will explore Flutter widgets, their types, and how they work to create dynamic and responsive applications.

What Are Widgets in Flutter?

Widgets are the basic building blocks of a Flutter app. They describe what a UI should look like, and Flutter renders them efficiently. Unlike traditional UI frameworks, where UI elements are drawn separately, Flutter rebuilds the UI whenever there is a state change, ensuring a smooth and interactive experience.

Types of Widgets in Flutter

Flutter widgets are broadly classified into two types:

1. Stateless Widgets

Stateless widgets are immutable, meaning they do not change once created. They are useful for displaying static content that does not require dynamic updates.

Example of a Stateless Widget:

import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Stateless Widget Example')),
body: Center(child: Text('Hello, Flutter!')),
);
}
}

In this example, MyStatelessWidget simply displays a static text message.

2. Stateful Widgets

Stateful widgets maintain a mutable state that can change during the widget’s lifetime. These widgets are essential for interactive UIs where the content updates dynamically.

Example of a Stateful Widget:

import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int counter = 0;
void incrementCounter() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Stateful Widget Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $counter', style: TextStyle(fontSize: 24)),
SizedBox(height: 20),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Increment'),
),
],
),
),
);
}
}

This widget has a counter that updates when the button is pressed, demonstrating how stateful widgets work.

Commonly Used Flutter Widgets

Flutter provides a rich set of widgets that make UI development easy. Some of the most commonly used widgets include:

1. Text Widget

Used to display text in an app.

Text('Hello, Flutter!', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold));

2. Container Widget

A flexible box model widget for styling elements.

Container(
width: 200,
height: 100,
color: Colors.blue,
child: Center(child: Text('Flutter Container')),
);

3. Row and Column Widgets

Used for layout design.

Column(
children: [
Text('Item 1'),
Text('Item 2'),
],
);

4. ListView Widget

Used for scrollable lists.

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

5. ElevatedButton Widget

A material design button.

ElevatedButton(
onPressed: () {
print('Button pressed');
},
child: Text('Click Me'),
);

Conclusion

Widgets in Flutter are the foundation of UI development. Understanding stateless and stateful widgets helps developers create interactive and visually appealing applications. By leveraging Flutter’s vast widget library, you can build apps that are not only functional but also maintainable and efficient.

Start experimenting with different widgets and build your next great app with Flutter!

--

--

Batoolshanzay
Batoolshanzay

Written by Batoolshanzay

0 Followers

A passionate Flutter mobile app developer and a Computer Science graduate from Pakistan. With a strong foundation in software development

No responses yet