Learn Stateless and Stateful Widgets

Definition

A stateless widget is a widget that does not store mutable state.

Understanding stateless widgets is essential for building efficient user interfaces in Flutter. You should use a stateless widget when the part of the UI you are building does not depend on any data that might change during the lifetime of the widget. If your widget only displays static information or reacts only to external changes coming from its parent, a stateless widget is the right choice. This approach helps keep your code simple and performant.

main.dart


              12345678910111213141516171819202122232425262728
            
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 GreetingWidget(),
    );
  }
}

class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stateless Example')),
      body: const Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

While stateless widgets are great for static content, many apps need to update the UI in response to user actions or other events. This is where stateful widgets come in. A stateful widget can store mutable state, and when that state changes, the widget rebuilds itself to reflect the new data. Stateful widgets have a lifecycle: they are created, can update their state, and are eventually disposed of when no longer needed. This makes them ideal for features like counters, forms, or anything that changes over time within the widget itself.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445
            
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 CounterWidget(),
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stateful Example')),
      body: Center(
        child: Text('Counter: $_counter', style: const TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Note

Prefer stateless widgets when possible for better performance. Use stateful widgets only when your UI needs to update in response to internal state changes.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you give examples of when to use stateless vs stateful widgets?

How do I decide which widget type to use in my Flutter app?

Can you explain the lifecycle methods of a stateful widget?

Swipe to show menu

Definition

A stateless widget is a widget that does not store mutable state.

main.dart


              12345678910111213141516171819202122232425262728
            
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 GreetingWidget(),
    );
  }
}

class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stateless Example')),
      body: const Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445
            
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 CounterWidget(),
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stateful Example')),
      body: Center(
        child: Text('Counter: $_counter', style: const TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Note

Prefer stateless widgets when possible for better performance. Use stateful widgets only when your UI needs to update in response to internal state changes.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1