Summary
This chapter explains how to implement immutable stateless widgets and mutable stateful widgets—detailing their class structures, lifecycle methods, and the use of setState to rebuild UI when data changes—and when to choose each based on the need for dynamic updates.

General domain of usage
User interface development

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

Definition

Watch this video to see how stateless and stateful widgets work in real Flutter apps. You'll learn when to use each type and how stateful widgets manage changes in the UI.

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.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSB7CiAgcnVuQXBwKGNvbnN0IE15QXBwKCkpOwp9CgpjbGFzcyBNeUFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgY29uc3QgTXlBcHAoe3N1cGVyLmtleX0pOwogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgcmV0dXJuIE1hdGVyaWFsQXBwKAogICAgICBob21lOiBjb25zdCBHcmVldGluZ1dpZGdldCgpLAogICAgKTsKICB9Cn0KCmNsYXNzIEdyZWV0aW5nV2lkZ2V0IGV4dGVuZHMgU3RhdGVsZXNzV2lkZ2V0IHsKICBjb25zdCBHcmVldGluZ1dpZGdldCh7c3VwZXIua2V5fSk7CiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gU2NhZmZvbGQoCiAgICAgIGFwcEJhcjogQXBwQmFyKHRpdGxlOiBjb25zdCBUZXh0KCdTdGF0ZWxlc3MgRXhhbXBsZScpKSwKICAgICAgYm9keTogY29uc3QgQ2VudGVyKAogICAgICAgIGNoaWxkOiBUZXh0KCdIZWxsbywgRmx1dHRlciEnKSwKICAgICAgKSwKICAgICk7CiAgfQp9

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.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSB7CiAgcnVuQXBwKGNvbnN0IE15QXBwKCkpOwp9CgpjbGFzcyBNeUFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgY29uc3QgTXlBcHAoe3N1cGVyLmtleX0pOwogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgcmV0dXJuIE1hdGVyaWFsQXBwKAogICAgICBob21lOiBjb25zdCBDb3VudGVyV2lkZ2V0KCksCiAgICApOwogIH0KfQoKY2xhc3MgQ291bnRlcldpZGdldCBleHRlbmRzIFN0YXRlZnVsV2lkZ2V0IHsKICBjb25zdCBDb3VudGVyV2lkZ2V0KHtzdXBlci5rZXl9KTsKICBAb3ZlcnJpZGUKICBTdGF0ZTxDb3VudGVyV2lkZ2V0PiBjcmVhdGVTdGF0ZSgpID0+IF9Db3VudGVyV2lkZ2V0U3RhdGUoKTsKfQoKY2xhc3MgX0NvdW50ZXJXaWRnZXRTdGF0ZSBleHRlbmRzIFN0YXRlPENvdW50ZXJXaWRnZXQ+IHsKICBpbnQgX2NvdW50ZXIgPSAwOwoKICB2b2lkIF9pbmNyZW1lbnRDb3VudGVyKCkgewogICAgc2V0U3RhdGUoKCkgewogICAgICBfY291bnRlcisrOwogICAgfSk7CiAgfQoKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIHJldHVybiBTY2FmZm9sZCgKICAgICAgYXBwQmFyOiBBcHBCYXIodGl0bGU6IGNvbnN0IFRleHQoJ1N0YXRlZnVsIEV4YW1wbGUnKSksCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogVGV4dCgnQ291bnRlcjogJF9jb3VudGVyJywgc3R5bGU6IGNvbnN0IFRleHRTdHlsZShmb250U2l6ZTogMjQpKSwKICAgICAgKSwKICAgICAgZmxvYXRpbmdBY3Rpb25CdXR0b246IEZsb2F0aW5nQWN0aW9uQnV0dG9uKAogICAgICAgIG9uUHJlc3NlZDogX2luY3JlbWVudENvdW50ZXIsCiAgICAgICAgY2hpbGQ6IGNvbnN0IEljb24oSWNvbnMuYWRkKSwKICAgICAgKSwKICAgICk7CiAgfQp9

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

Note

When should you use a StatefulWidget instead of a StatelessWidget?

Learn the essential skills to build simple, visually appealing Android and iOS apps using Flutter. This course covers Dart fundamentals, Flutter project structure, UI building blocks, navigation, and theming to help you create robust mobile applications.

Get introduced to Flutter and Dart, their relationship, and the core concepts that power Flutter app development.

Dive into the widget-based architecture of Flutter and understand how the widget tree and build context work.

Master the essential widgets and layout systems for building clean and responsive Flutter UIs.

Implement navigation in your Flutter apps using Navigator, named routes, and data passing techniques.

Stateless and Stateful Widgets