StatelessWidget in Flutter

Introduction

A StatelessWidget is used to create parts of your app that do not change over time. It helps build simple, fixed UI pieces.

When you want to show a static text or image that never changes.

When you build a button that does not update its look or content.

When you create a screen header or footer that stays the same.

When you want to display icons or labels that remain constant.

When you want a simple layout that does not need to update dynamically.

Syntax

Flutter

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

The build method returns the UI to display.

StatelessWidget cannot change its state after creation.

Examples

This widget shows a simple text that never changes.

Flutter

class HelloText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello World');
  }
}

This widget shows a fixed blue square box.

Flutter

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    );
  }
}

Sample App

This app shows a simple screen with a title bar and centered text. The text never changes because it is inside a StatelessWidget.

Flutter

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: Scaffold(
        appBar: AppBar(title: const Text('StatelessWidget Example')),
        body: const Center(
          child: Greeting(),
        ),
      ),
    );
  }
}

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

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

Important Notes

Use StatelessWidget when your UI does not need to update after it appears.

If you need to change the UI based on user actions or data, use StatefulWidget instead.

StatelessWidgets are faster and simpler because they do not hold or manage state.

Summary

StatelessWidget builds UI that never changes.

It has a build method that returns the widget tree.

Use it for static parts of your app for better performance.