Flutter: Stateless Widgets

You are currently viewing Flutter: Stateless Widgets

Flutter: Stateless Widgets

In Flutter, everything you see on the screen is a widget. From buttons to text, images to entire screens — widgets are the building blocks of your app. Some of them can change over time, while others stay exactly the same.

In this article, we’ll explore StatelessWidgets — the kind that do not change once they are built.

Introduction

When building a Flutter app, you’ll often choose between two main types of widgets:

  • StatelessWidget – used when the widget doesn’t need to change.
  • StatefulWidget – used when the widget needs to update, like reacting to user input or animations.

Understanding StatelessWidget is an important first step in learning Flutter. In this article, we’ll look at what it is, when to use it, and how to build one.

What Is a StatelessWidget?

A StatelessWidget is a widget that does not have any internal state. It builds its UI once and doesn’t rebuild unless the parent widget tells it to.

You can think of it like a printed menu in a restaurant—what’s on it stays the same no matter how many times you look at it. If anything needs to change, a completely new menu has to be printed and put in its place.

This makes StatelessWidgets great for showing static information or layouts that don’t change over time.

When to Use a StatelessWidget

Use a StatelessWidget when:

  • Your widget only displays information that doesn’t change
  • It doesn’t need to respond to user input by updating itself
  • The UI is controlled completely by the widget’s constructor parameters

Examples include:

  • A logo or banner on a screen
  • A static label like “Terms and Conditions”
  • An informational card that doesn’t change
  • A read-only article viewer

Creating a Business Card

Let’s create a real-world example: a widget that displays a user’s business card with their name and role. Since this information doesn’t change, it’s a perfect case for using a StatelessWidget.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Business Card',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('My Business Card')),
        body: const Center(
          child: BusinessCard(
            name: 'Edward Programmer',
            role: 'Flutter Developer',
          ),
        ),
      ),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      margin: const EdgeInsets.all(16),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(name, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Text(role, style: const TextStyle(fontSize: 18, color: Colors.grey)),
          ],
        ),
      ),
    );
  }
}

This example shows a simple card with a name and job title. Since the information doesn’t change, we use a StatelessWidget to display it.

Stateless Widgets [Business Card]

Creating an About Us Screen

Here’s another real-world example: imagine you’re creating a simple “About Us” screen for a company app. The screen contains the company name, a short description, and a logo. Since none of this information changes or requires user interaction, a StatelessWidget is the perfect choice.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const AboutPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About Us')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Center(
              child: FlutterLogo(size: 100),
            ),
            SizedBox(height: 20),
            Text(
              'Our Company',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              'We build beautiful mobile apps using Flutter. '
              'Our goal is to deliver fast, responsive, and user-friendly software.',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

This is another perfect example of using a StatelessWidget. The content is fixed, the layout is simple, and it doesn’t need to rebuild or respond to any user input.

Stateless Widgets [Our Company]

How Does It Work?

In a StatelessWidget, the key method to override is build(). This method returns a widget tree that describes how the UI should look.

Flutter calls build() when the widget is first created, and it only calls it again if the parent widget asks it to rebuild. Since StatelessWidget doesn’t manage any internal state or track changes, it just builds what it’s told, based on the provided input.

If something on the screen needs to change, you’ll need to create a new instance of the widget with updated values.

Performance Benefits of Stateless Widgets

StatelessWidgets are great for performance, and here’s why:

  • They don’t manage state, so they use less memory.
  • Since they don’t update themselves, they avoid triggering unnecessary rebuilds.
  • They’re easy to test and reuse, contributing to a cleaner app architecture.

If your widget doesn’t need to change, choosing a stateless approach is always the better choice for performance.

Best Practices

  • Keep it simple: StatelessWidgets should be small and focused on a single task.
  • Break down complex screens into smaller StatelessWidgets for better organization and readability.
  • Avoid placing logic inside build(): Pass all required data through constructor parameters to keep the widget clean and efficient.

Good design in Flutter starts with clear, stateless components that do one thing well.

Common Mistakes to Avoid

  • Trying to update the UI using a StatelessWidget—this won’t work because it doesn’t hold state.
  • Placing stateful logic like counters or animations inside a StatelessWidget.
  • Giving a single widget too many responsibilities instead of breaking it down into smaller, more manageable components.

Always choose the right widget for the job. If your widget needs to change, use a StatefulWidget instead.

Conclusion

StatelessWidgets are an essential part of Flutter development. They’re simple, efficient, and ideal for displaying content that doesn’t change. Use them for components like headers, labels, or static screens where no updates or user interactions are required.

If your widget’s content will never change, always start with a StatelessWidget.

In conclusion, StatelessWidgets are one of the simplest yet most powerful tools in Flutter. Once you grasp their usage, you’ll be able to build beautiful and efficient UI components with confidence.