Os widgets son os bloques básicos cos que se constrúe a interface de usuario. Cada elemento visual que ves nunha aplicación Flutter —como texto, botóns, imaxes, caixas de texto ou estruturas máis complexas— é un widget.

Un widget describe como debe verse e comportarse unha parte da interface.

🌳 Os widgets non son elementos que debuxen directamente na pantalla, senón que forman unha árbore (a árbore de widgets) que describe como será a interface.

🧠 Internamente, Flutter analiza a árbore de widgets e encárgase de transformala nos elementos gráficos reais que ves na app.

🧱 Everything is a Widget #

Esta é unha das filosofías centrais de Flutter: “Todo é un Widget”. Significa que calquera cousa que vexas na pantalla, calquera elemento de control, ou calquera aspecto da organización da interface, dende o máis pequeno ata o máis grande, é un widget.

Esta é unha das frases máis repetidas cando se aprende Flutter, e é completamente certa. Todo —e dicimos TODO— é un widget:

🧱 Bloques #

En Flutter, a interface de usuario constrúese a partir de pequenos bloques chamados widgets. Estes widgets son as “pezas de Lego” que combinas para crear a túa aplicación. Poden ser elementos visuais, elementos de deseño ou elementos de lóxica.

🧩 Que pode ser un Widget? #

• Elementos visuais: Como texto (Text), imaxes (Image), iconas (Icon), botóns (ElevatedButton).
• Elementos de deseño (layout): Como filas (Row), columnas (Column), contedores (Container), que axudan a organizar outros widgets na pantalla.
• Elementos de interacción: Como campos de texto (TextField), caixas de selección (Checkbox).
• Elementos de utilidade: Como o propio MaterialApp (que define o tema da túa app) ou Scaffold (que crea a estrutura básica dunha pantalla).

🔒 Natureza dos Widgets: #

Os widgets en Flutter son inmutables. Isto significa que, unha vez creados, non cambian. Cando a interface necesita actualizarse, Flutter non modifica os widgets existentes, senón que crea unha nova árbore de widgets e comparaa coa anterior para actualizar eficientemente só o que cambiou na pantalla.

🧪 Exemplo #

O seguinte exemplo mostra unha pequena interface gráfica cun texto, un espazo en branco e un botón. Cada un destes elementos visuais é un widget, e están organizados dentro doutros widgets que forman a árbore completa.

📌 Explicación dos principais widgets do exemplo:

• Text() → 🧱 Representa unha liña de texto. Neste caso, amosa “Ola, mundo!” na pantalla.
• SizedBox(height: 20) → 📏 Crea un espazo vertical de 20 píxeles entre o texto e o botón. É útil para separar elementos. Tamén é un widget.
• ElevatedButton() → 🔘 É un botón elevado con estilo Material Design. Neste exemplo, está desactivado (onPressed: null) e contén como fillo outro widget: Text('Preme aquí').

🔗 Ver o código en DartPad

🌳 A árbore de Widgets #

Os widgets en Flutter non existen de forma illada; organízanse nunha árbore xerárquica. Isto significa que cada widget é o “pai” de outros widgets, que á súa vez son “fillos” do primeiro. Esta árbore define a estrutura visual e a relación entre todos os compoñentes da túa interface.

• A UI de Flutter constrúese aniñando widgets uns dentro doutros, formando unha árbore. Os widgets “pai” conteñen e organizan os widgets “fillos”.
• Relación Pai-Fillo: Un widget como Scaffold é o pai de AppBar e body. O body á súa vez pode ser o pai dun Center, e así sucesivamente.

BuildContext: Cada widget no método build() recibe un BuildContext. Este contexto é como a “dirección” do widget na árbore. Permíteche acceder a información da árbore (como o tema actual da aplicación) ou atopar widgets ancestros.

🌲 Esquema dunha árbore de widgets de exemplo #

MaterialApp
  └── Scaffold
      ├── AppBar
      │   └── Text ('Widgets en Acción')
      └── body (Center)
          └── Column
              ├── Container
              │   └── Text ('Este é un texto...')
              └── ElevatedButton
                  └── Row
                      ├── Icon (thumb_up)
                      ├── SizedBox
                      └── Text ('Gústame!')

🌲 Exemplo ilustrativo da Árbore de Widgets #

Nesta exemplo, Flutter constrúe unha árbore coa seguinte estrutura xerárquica:

MaterialApp → (nivel 1): raíz da aplicación.
  └── Scaffold → (nivel 2): estrutura da pantalla
      ├── AppBar → (nivel 3): cabeceira da pantalla.
      │   └── Text ('Widgets en Acción') → (nivel 4)
      └── body (Center) → (nivel 3)
          └── Column → (nivel 4) → lista de fillos:
              ├── Container → (nivel 5)
              │   └── Text ('Este é un texto...') → (nivel 6)
              └── ElevatedButton → (nivel 5)
                  └── Row → (nivel 6)
                      ├── Icon (thumb_up) → (nivel 7)
                      ├── SizedBox → (nivel 7)
                      └── Text ('Gústame!') → (nivel 7)

📌 Cada widget que aparece no código forma parte dunha árbore de widgets. Esta estrutura permítelle a Flutter saber como construír e actualizar a interface de forma eficiente.

🔗 Ver o código en DartPad

⚖️ Diferenza entre StatelessWidget e StatefulWidget #

A distinción entre StatelessWidget e StatefulWidget é fundamental en Flutter e determina como se comportan os teus widgets cando os datos da interface cambian.

🧱 StatelessWidget (Widgets sen estado) #

Úsase cando o contido do widget non necesita cambiar mentres a app está en execución.

• Non teñen estado interno que poida cambiar durante a vida da aplicación.
• Son máis sinxelos e eficientes.
• Exemplos: Text (o texto non cambia a menos que lle pases un texto novo), Icon, Image, Container.

Cando usalos: Cando a información que mostra o widget é fixa ou só depende dos parámetros que se lle pasaron.

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

  @override
  Widget build(BuildContext context) {
    return const Text('Ola, mundo!');
  }
}

🔁 #

StatefulWidget (Widgets con estado)

Úsase cando o widget debe actualizar a súa interface como resultado dunha acción (premer un botón, introducir texto, etc.).

• Exemplos: Checkbox (o seu estado “marcado/desmarcado” cambia), TextField (o texto que o usuario escribe cambia), un contador que se incrementa.
• Estrutura: Un StatefulWidget divídese en dúas clases: o propio StatefulWidget e a clase State asociada. A clase State é onde se garda o estado mutable e onde se define o método build() que crea a UI.

Cando usalos: Cando o widget necesita cambiar a súa aparencia ou os seus datos sen ser totalmente substituído.

class Contador extends StatefulWidget {
  const Contador({super.key});

  @override
  State<Contador> createState() => _ContadorState();
}

class _ContadorState extends State<Contador> {
  int _valor = 0;

  void _incrementar() {
    setState(() {
      _valor++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Valor actual: $_valor'),
        ElevatedButton(
          onPressed: _incrementar,
          child: const Text('Incrementar'),
        ),
      ],
    );
  }
}

📚 Máis información oficial e APIs #

• 📘 Introdución aos widgets en Flutter
• 🌳 Catálogo de widgets de Flutter
• 🧱 StatelessWidget e StatefulWidget
• 🧭 Navegación entre pantallas con widgets

🔗 APIs oficiais #

• 🗂️ Flutter Widget – API de Flutter – catálogo oficial completo
• 🧱 StatelessWidget – API de Flutter
• 🔁 StatefulWidget – API de Flutter