---
title: 🌗 Cambiar o tema con setState
description: "## 🌗 Cambiar o tema cun interruptor No Tema 3.2 aprendemos a configurar os temas claro e escuro dunha aplicación, pero escollemos o modo directamente no código. ![Repaso do Tema 3.2: configurar os temas claro e escuro](https://www.drodicio.com/wp-content/uploads/2026/10/tema_claro_escuro-scaled.png) Repaso do Tema…"
url: "https://www.drodicio.com/docs/flutter/tema-3-estado-callbacks/cambiar-tema/"
updated: "2026-10-12"
category: Tema 3. Estado e callbacks
---

# 🌗 Cambiar o tema con setState

## 🌗 Cambiar o tema cun interruptor

No Tema 3.2 aprendemos a configurar os temas claro e escuro dunha aplicación, pero escollemos o modo directamente no código.

![Repaso do Tema 3.2: configurar os temas claro e escuro](https://www.drodicio.com/wp-content/uploads/2026/10/tema_claro_escuro-scaled.png)
Repaso do Tema 3.2: configurar os temas claro e escuro

> 💡 Neste apartado imos aprender a **cambiar entre o tema claro e o escuro mentres a aplicación está en funcionamento**, sen necesidade de modificar o código.

Para iso:

- Engadiremos un interruptor (`SwitchListTile`) que permitirá ao usuario escoller o modo que prefira.
- Gardaremos esa elección nunha variable booleana (`bool`) do `State`.
- Utilizaremos `setState` para actualizar a interface cada vez que cambie o interruptor.

Deste xeito, veremos como combinar a xestión do estado cos temas de Flutter para que a aparencia de toda a aplicación cambie automaticamente segundo a elección do usuario.

Ademais, utilizaremos a propiedade `colorSchemeSeed` de `ThemeData` para xerar automaticamente un esquema de cores a partir dunha cor inicial. É unha forma máis sinxela de conseguir un resultado similar ao que obtivemos con `ColorScheme.fromSeed` no Tema 3.2.

## 🧪 Exemplo completo

Neste programa, ao activar ou desactivar o interruptor, cambia automaticamente o tema de toda a aplicación, incluíndo o fondo e a tarxeta, e non só a cor do propio interruptor.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=dba46d5be4588e111f6c6c6d16479d07`](https://dartpad.dev/?id=dba46d5be4588e111f6c6c6d16479d07).

[https://dartpad.dev/embed-inline.html?id=dba46d5be4588e111f6c6c6d16479d07](https://dartpad.dev/embed-inline.html?id=dba46d5be4588e111f6c6c6d16479d07)

O operador condicional `?:` permite escoller entre dous valores segundo se cumpra ou non unha condición. Neste exemplo, se `_escuro` é `true`, utilizamos `ThemeMode.dark`; se é `false`, utilizamos `ThemeMode.light`.

Tamén existe `ThemeMode.system`, que permite adaptar automaticamente o tema á configuración do dispositivo, como vimos no Tema 3.2.

A elección pérdese ao reiniciar a aplicación. Para gardala entre execucións, consulta as preferencias do Tema 3.6.

![Cambio entre o modo claro e o escuro cun interruptor](https://www.drodicio.com/wp-content/uploads/2026/10/cambiar_tema-scaled.png)
Cambio entre o modo claro e o escuro cun interruptor

> 📚 Consulta:
>
>
>
> - [SwitchListTile → `https://api.flutter.dev/flutter/material/SwitchListTile-class.html`](https://api.flutter.dev/flutter/material/SwitchListTile-class.html).