Educational

Example of Stateless Widget

—

by

Saim Khalid
in

with this code snippet:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

return Text("Hello, Flutter!");
  }
}

Here’s your full post:

Example of Stateless Widget in Flutter

One of the first steps in learning Flutter is understanding Stateless Widgets. As we know, everything in Flutter is a widget, and there are two main types: Stateless and Stateful.

This article will give you a deep dive into Stateless Widgets by using a simple example. We’ll explore:

  • What is a Stateless Widget?
  • The structure of a Stateless Widget in code
  • A detailed explanation of the example MyWidget
  • How Flutter handles stateless widgets internally
  • When to use a Stateless Widget
  • Common use cases and best practices
  • Real-world scenarios where Stateless Widgets are perfect
  • Mistakes to avoid when working with Stateless Widgets

By the end of this post, you will not only understand the code snippet but also gain practical knowledge of when and how to use Stateless Widgets effectively in your Flutter projects.

What is a Stateless Widget?

A Stateless Widget is a widget that does not change during its lifetime.

  • It is immutable → meaning its properties are fixed once created.
  • It does not store any internal state that affects its rendering.
  • Whenever it needs to update, Flutter replaces the widget with a new instance instead of modifying the old one.

In simple words:
Use a Stateless Widget when your UI does not depend on any dynamic data or user interaction.

Examples:

  • A piece of text that always shows the same message.
  • A logo on the splash screen.
  • A static background image.

Basic Structure of a Stateless Widget

Every stateless widget in Flutter extends the StatelessWidget class.

The structure looks like this:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

return // return your widget here
  }
}

Key Points:

  1. class MyWidget extends StatelessWidget
    • You define your own widget by extending StatelessWidget.
    • This makes your widget immutable.
  2. @override Widget build(BuildContext context)
    • You must override the build() method.
    • This method describes how your widget should look on the screen.
  3. return Text("Hello, Flutter!");
    • The build method returns another widget.
    • In this case, a simple Text widget.

Example: MyWidget

Let’s look at the complete example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

return Text("Hello, Flutter!");
  }
}

Step-by-Step Explanation

  1. class MyWidget extends StatelessWidget
    • You’re creating a new widget called MyWidget.
    • Since it extends StatelessWidget, it will always render the same content.
  2. @override
    • This tells Flutter that you are overriding the parent class’s build() method.
  3. Widget build(BuildContext context)
    • The build() method is the heart of every widget.
    • It describes what UI should look like.
  4. return Text("Hello, Flutter!");
    • Instead of building something complex, we just return a Text widget.
    • Whenever MyWidget is used, it will always show “Hello, Flutter!”.

How to Use MyWidget in an App

Here’s how you can add this widget to your app:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("Stateless Widget Example")),
    body: Center(
      child: MyWidget(),
    ),
  ),
);
  }
}

What Happens Here:

  • The app starts with MyApp.
  • MyApp is also a Stateless Widget.
  • Inside Scaffold, we use MyWidget() in the body.
  • Result → The app shows “Hello, Flutter!” text in the center of the screen.

Why This is a Stateless Widget

  • The text never changes.
  • There’s no user interaction affecting the widget.
  • If you want to display a different message, you’d need to create a new instance of the widget with a different string.

So, it’s the perfect example of a stateless widget.

Benefits of Using Stateless Widgets

  1. Performance
    • They are lightweight since they don’t store state.
    • Flutter can easily rebuild them when needed.
  2. Simplicity
    • Easy to write and maintain.
    • Great for static content.
  3. Predictability
    • Since they don’t change, you always know what UI will look like.
  4. Reusability
    • You can create small stateless widgets and reuse them across your app.

When to Use Stateless Widgets

You should use a Stateless Widget when:

  • The widget’s output depends only on its input parameters.
  • The UI does not change over time.
  • You’re building static parts of your app.

Examples in Real Apps:

  • Headers and titles.
  • Static icons in a navigation bar.
  • Decorative elements like dividers and background images.
  • Branding components like logos.

Limitations of Stateless Widgets

While useful, they also have limitations:

  • Cannot handle dynamic updates.
  • Cannot store changing data.
  • Must be rebuilt entirely if you want different content.

If your widget needs to change based on user interaction (like a checkbox or text field), you must use a Stateful Widget instead.

Best Practices for Stateless Widgets

  1. Keep Widgets Small
    • Instead of writing huge widgets, break them into smaller stateless widgets.
  2. Use Composition
    • Build complex UIs by combining multiple stateless widgets.
  3. Pass Data via Constructor
    • Example: class GreetingWidget extends StatelessWidget { final String name; GreetingWidget({required this.name}); @override Widget build(BuildContext context) { return Text("Hello, $name!"); } } Now you can reuse it:
      • GreetingWidget(name: "Alice")
      • GreetingWidget(name: "Bob")
  4. Prefer Stateless by Default
    • Only use Stateful when absolutely required.

Real-World Example: Business Card Widget

Here’s a slightly bigger example of a Stateless Widget:

class BusinessCard extends StatelessWidget {
  final String name;
  final String role;

  BusinessCard({required this.name, required this.role});

  @override
  Widget build(BuildContext context) {

return Card(
  margin: EdgeInsets.all(16),
  child: Padding(
    padding: EdgeInsets.all(12),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(name, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Text(role, style: TextStyle(fontSize: 16)),
      ],
    ),
  ),
);
  }
}

Usage:

BusinessCard(name: "John Doe", role: "Flutter Developer")

This widget always displays the same card once created → Stateless.

Common Mistakes Beginners Make

  1. Using Stateful unnecessarily
    • Many beginners use Stateful for static UIs, which is wasteful.
  2. Not reusing Stateless Widgets
    • Instead of duplicating code, create small reusable stateless widgets.
  3. Overly complex build methods
    • If your build method becomes too big, extract parts into separate stateless widgets.

Flutter’s Rendering of Stateless Widgets

Behind the scenes:

  • Flutter treats Stateless Widgets as configuration objects.
  • They describe the UI once.
  • If the parent widget rebuilds, Flutter compares the old widget with the new one.
  • If nothing changes, it reuses the existing widget efficiently.

This makes Stateless Widgets fast and efficient.

Thinking in Widgets

When you’re building a Flutter app, you should start by asking:

  • Does this part of the UI change dynamically?
    • If yes → Stateful Widget.
    • If no → Stateless Widget.

Our example MyWidget shows this perfectly:

  • Since the text is fixed → it’s Stateless.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *