Flutter Widgets

Before you can master Flutter, there’s one core concept you must understand:

Everything in Flutter is a widget.

Yes — every button, every text, every space, every screen.
They are all Flutter widgets.

Once this idea clicks, Flutter suddenly becomes much easier to learn.

What Is a Flutter Widget? #

Let’s keep this simple.

A Flutter widget is a description of how part of your user interface should look.

It is not a pixel.
It is not drawn directly on the screen.

Instead, a flutter widget describes:

What to show
How it should look
Where it should go

Think of it like giving instructions:

Show a text
Center it
Make it blue
Make it bigger

Flutter uses these instructions to create the UI.

And when something changes?

You give Flutter new widget instructions.

That’s the foundation of all Flutter apps.

Why Flutter Widgets Matter So Much #

When you look at a mobile app, you see:

A title
A button
Some text
A list
Spacing and padding

Flutter looks at the same screen and says:

“That’s a tree of flutter widgets.”

Not some parts.
Not most parts.

Every single part is built using flutter widgets.

Text is a widget
Buttons are widgets
Padding is a widget
Layout is widgets
Even empty space is a widget

Once you understand this, Flutter stops feeling magical — and starts feeling logical.

The Flutter Widget Tree Explained #

Flutter widgets live in something called a widget tree.

This means widgets are structured like a family tree:

One parent widget
Child widgets inside it
Grandchildren widgets inside those

Example widget tree:

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

Each flutter widget:

Knows its parent
Knows its children
Focuses only on its own responsibility

This structure keeps Flutter apps clean and predictable.

Your First Flutter Widget Example #

Here’s a simple flutter widget:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Hello Flutter!');
  }
}
Code language: JavaScript (javascript)

This code says:

“I am a flutter widget”
“I do not change”
“When Flutter asks how I look”
“I display some text”

That’s it.

You’ve already written a Flutter widget.

Two Types of Flutter Widgets (Very Important) #

Flutter has two main types of widgets.

Understanding these early will save you a lot of frustration.

StatelessWidget — Simple Flutter Widgets #

A StatelessWidget is a flutter widget that never changes.

Use it when:

The UI is static
No data updates are needed

Example:

class WelcomeText extends StatelessWidget {
  const WelcomeText({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text(
      'Welcome to Flutter',
      style: TextStyle(fontSize: 24),
    );
  }
}
Code language: JavaScript (javascript)

This flutter widget is calm, predictable, and stable.

StatefulWidget — Interactive Flutter Widgets #

A StatefulWidget is used when the UI changes over time.

Examples:

Counters
Buttons
Forms
Toggles

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}
Code language: JavaScript (javascript)

The state class stores data:

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: const Text('Increment'),
        ),
      ],
    );
  }
}
Code language: JavaScript (javascript)

The most important Flutter widget concept here #

setState(() {
  count++;
});

This tells Flutter:

“Something changed — rebuild this widget.”

This single idea powers most interactive Flutter widgets.

Layout Flutter Widgets: Row and Column #

Flutter layouts are controlled using widgets.

Column (Vertical Layout) #

Column(
  children: [
    Text('First'),
    Text('Second'),
    Text('Third'),
  ],
)
Code language: JavaScript (javascript)

Row (Horizontal Layout) #

Row(
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

Mastering these layout flutter widgets makes UI building much easier.

Container: The Most Used Flutter Widget #

Container is one of the most powerful flutter widgets.

It can handle:

Padding
Margin
Size
Colors
Borders

Container(
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text(
    'Inside a container',
    style: TextStyle(color: Colors.white),
  ),
)
Code language: JavaScript (javascript)

You will use this widget constantly — and that’s normal.

Scaffold: The Flutter App Screen Widget #

Scaffold provides the basic structure of a screen.

Scaffold(
  appBar: AppBar(
    title: const Text('My App'),
  ),
  body: const Center(
    child: Text('Hello World'),
  ),
)
Code language: JavaScript (javascript)

This widget holds the app bar, body, and other screen elements.

MaterialApp: The Root Flutter Widget #

At the top of every Flutter app is MaterialApp.

MaterialApp(
  title: 'Flutter App',
  theme: ThemeData(primarySwatch: Colors.blue),
  home: const HomeScreen(),
)
Code language: JavaScript (javascript)

This widget enables:

Navigation
Themes
Material Design

Small Flutter Widgets That Make a Big Difference #

Center #

Center(child: Text('Centered'))
Code language: JavaScript (javascript)

Padding #

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Spaced nicely'),
)
Code language: JavaScript (javascript)

SizedBox #

SizedBox(height: 20)
Code language: HTTP (http)

These flutter widgets dramatically improve layout quality.

Flutter Widgets for Lists and Scrolling #

Most real apps display lists.

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)
Code language: JavaScript (javascript)

This is one of the most commonly used flutter widgets.

One Core Philosophy of Flutter Widgets #

Flutter encourages composition.

Build small widgets
Combine them together
Reuse them everywhere

Think LEGO blocks, not giant components.

Why Developers Love Flutter Widgets #

Two words:

Hot Reload

Change code → Save → See UI update instantly.

This makes learning and experimenting with flutter widgets incredibly fast.

Final Thought on Flutter Widgets #

Flutter isn’t hard because of widgets.
Flutter becomes easy because of widgets.

Once you understand how flutter widgets work, everything else builds naturally.

What to Learn After Flutter Widgets #

Next steps:

Navigation and routing
Forms and user input
State management
API integration
Animations

Flutter widgets will still be there — supporting you at every step.

Happy building with Flutter widgets 🚀

Was this tutorial helpful ?