Understanding Widgets in Flutter: A Beginner-Friendly Guide to Stateless and Stateful Widgets

Hi, I’m Manish Mishra, founder of GeekyMob.com, and a mobile developer with over years of experience building apps for both Android and iOS.

In this article, we’re going to break down one of the most important concepts in Flutter — Widgets. If you’ve ever wondered what a widget is, how it works, and why everything in Flutter seems to be a widget, you’re in the right place.

What Is a Widget in Flutter?

Let’s imagine you’re showing a simple greeting on the screen.

In Flutter, you’d use a Text widget. Think of it like a digital label maker. You tell the label maker what text to put on the label, maybe what color it should be, and how big the letters should be.

Text(“Hello, Flutter!”);

In this line of code

Text is the type of widget – it’s our digital label.
“Hello, Flutter!” is the information we’re giving to the Text widget – it’s the text we want to display on our label.
Flutter takes this simple instruction and draws the words “Hello, Flutter!” on the screen.

Now, let’s say you want to add a button that says “Click Me”. You’d use a ElevatedButton widget (think of it as a special button brick). You tell it what text to show and what should happen when someone taps it.

ElevatedButton(
onPressed: () {
print(“Button tapped!”);
},
child: Text(“Click Me”),
);

Here:

ElevatedButton is the button widget.
onPressed tells the button what to do when it’s tapped (in this case, print something to the console).
child: Text(“Click Me”) tells the button what to display inside it – another Text widget.
So, you’re putting one widget (the Text “Click Me”) inside another widget (the ElevatedButton). This is how you start building more complex interfaces by combining these simple building blocks.

Think of it like this:

You want to show your name. You take a Text widget and give it your name. That’s one building block.

You want to make that name stand out, so you put some padding around it (like a border of empty space). You’d use a Padding widget and put your Text widget inside it. The Padding widget doesn’t display anything itself, but it changes the space around what’s inside it.

Padding(
padding: EdgeInsets.all(16.0), // Add 16 pixels of padding on all sides
child: Text(“Your Name”),
);

Each of these (Text, ElevatedButton, Padding) is a widget, a basic building block that Flutter uses to create the user interface you see on the screen. They are simple on their own, but when you combine them, you can build amazing things!

Types of Widgets in Flutter

Widgets in Flutter come in two main types:

StatelessWidget

These are widgets that don’t change over time. Once they are built, they stay the same unless rebuilt by the framework.

Use case:
When the UI doesn’t need to update dynamically — like a static title or icon.

class MyTitle extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(“Hello, Flutter!”);
}
}

StatefulWidget

These widgets can change based on user interaction or data updates.

Use case:
When you need to update part of your UI — like a counter or a form input.

class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int count = 0;
void _increment() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(‘Count: $count’),
ElevatedButton(
onPressed: _increment,
child: Text(‘Add’),
),
],
);
}
}

Common Widgets in flutter

Here are a few commonly used widgets in Flutter like Text, Container, Image, Scaffold, ListView, Row, Column, Button etc..

Widget Tree in Flutter

Widgets in Flutter form a tree-like structure. The root widget is usually the MaterialApp or CupertinoApp.

MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text(“My App”)),
body: Center(child: Text(“Hello!”)),
),
);

In this example, the widget tree looks like

MaterialApp
└── Scaffold
       ├── AppBar
       │    └── Text
       └── Body
             └── Center
                     └── Text

What is build() Method

Every widget has a build() method that tells Flutter how to display the UI.

• For StatelessWidget, it’s built once.
• For StatefulWidget, it’s rebuilt when setState() is called.

Tips for Working with Widgets or Manage the Widgets

• Keep widgets small and focused. Break your UI into smaller reusable widgets.
• Use const constructors when possible to improve performance.
• Use Keys when managing dynamic lists to avoid rendering issues.

Common Mistakes I Made at the Start

• Using StatefulWidget when StatelessWidget is enough.
• Forgetting to use setState() when updating the UI.
• Overcomplicating widget trees without splitting them.

Let’s conclude this

Understanding how widgets work is essential to mastering Flutter. Think of widgets as the bricks of your app. Once you know how to stack and arrange them correctly, you can build any interface you imagine.

If you’re just starting out

• Play with simple widgets.
• Practice creating layouts using Row, Column, and Container.
• Experiment with both StatelessWidget and StatefulWidget.

Was This Helpful?

If this guide made widgets less confusing for you, share it with your fellow developers! Let’s help more people fall in love with Flutter — one widget at a time.

Got questions or want help with your project? Reach out to me at GeekyMob.com — I’m always happy to help! or You can connect with me on LinkedIn.