Nesta sección, explorarás os bloques fundamentais de construción das interfaces de usuario en Flutter: os Widgets. Aprenderás a usar algúns dos widgets máis básicos, a estruturar as túas pantallas e a navegar entre elas.

🧱 Concepto de Widget

En Flutter, case todo é un Widget.

• Un Widget é un bloque de construción básico da interface de usuario.
• Poden ser elementos visuais (como texto ou botóns), elementos de deseño (como columnas ou filas), ou elementos de lóxica (como os que xestionan o estado).
• Os Widgets combínanse e aniñan uns dentro doutros para construír interfaces complexas.

Existen dous tipos principais de widgets:

• StatelessWidget (sen estado)
• StatefulWidget (con estado).

Para esta primeira aproximación, centrarémonos nos StatelessWidget que son máis sinxelos.

Text

O widget Text é un dos máis sinxelos e serve para mostrar unha cadea de texto na pantalla.

Container

O widget Container é un widget de propósito xeral que pode utilizarse para moitas cousas, como:

• Engadir marxe (margin) e recheo (padding) ao seu contido.
• Establecer unha cor de fondo (color).
• Definir un tamaño (width, height).
• Agrupar outros widgets.

🔗 Onde saber máis:

• Introdución aos Widgets
• Widget Text
• Widget Container

Exemplo práctico: Un saúdo sinxelo

Imos crear unha aplicación básica que mostre un saúdo dentro dun Container.

Na pantalla principal da nosa aplicación cargamos un Container, que será o widget raíz da pantalla. Ese Container terá:

• Unha cor azul clara de fondo (color: Colors.lightBlueAccent)
• Como contido (child:), un texto centrado cun Center.
• O texto mostrará a mensaxe «Saúdos a toda a clase de 2º DAM do IES San Mamede!», cun estilo que inclúe cor branca e tamaño de letra 24 puntos.

🔗 Ver o código en DartPad

📲 Estrutura básica de pantalla con Scaffold

O widget Scaffold proporciona unha estrutura visual básica para as aplicacións que seguen as directrices de Material Design. Simplifica a creación de interfaces comúns, incluíndo:

• Unha barra superior (AppBar).
• Un corpo principal (body) onde colocas o contido da pantalla.
• Un botón de acción flotante (floatingActionButton).
• Unha barra inferior de navegación (bottomNavigationBar).
• Moitos outros compoñentes.

Scaffold é o «esqueleto» dunha pantalla de Material Design, proporcionando unha estrutura organizada para os elementos da UI.

🔗 Onde saber máis:

• Widget Scaffold
• Widget AppBar

📌 Exemplo: Scaffold básico

Partindo do exemplo anterior, agora, na pantalla principal da nosa aplicación cargamos un Scaffold. Este widget proporciona a estrutura visual básica dunha pantalla segundo as directrices de Material Design.

O Scaffold que imos empregar terá:

• Unha barra superior que visualiza o texto «Benvida».
• Un botón flotante na parte inferior dereita. Ao pulsar nel, veremos a mensaxe «Botón pulsado!» na consola.
• No corpo da pantalla (body:), incluímos o mesmo Container do exemplo anterior cun saúdo centrado e fondo azul claro.

Este exemplo serve para introducir os elementos estruturais dunha pantalla típica en Flutter, coma a appBar e o botón flotante de acción.

🔗 Ver o código en DartPad

🎨 Temas e Estilos (ThemeData básico)

Flutter permite definir un tema para a túa aplicación, que inclúe cores, tipografías e formas, que se aplican de forma consistente en toda a interface de usuario. Isto faise mediante o widget ThemeData, que se define normalmente no MaterialApp.

ThemeData permíteche establecer cores, fontes e outros estilos para toda a túa aplicación, asegurando unha aparencia unificada.

🔗 Onde saber máis:

• Temas en Flutter:
• Clase ThemeData

📌 Exemplo: Cambiar a cor principal e o estilo de texto

Neste exemplo vemos como definir un tema personalizado para a nosa aplicación Flutter.

A clase AplicacionConTema é o widget raíz, e dentro dela usamos MaterialApp para configurar o comportamento visual global da aplicación. Un dos parámetros máis importantes dese MaterialApp é theme, onde establecemos o tema da app.

🎨 theme: ThemeData(...):

A propiedade theme permítenos configurar o estilo visual de toda a app. Usamos o widget ThemeData, que é unha clase de Flutter que define:

• A cor principal (primarySwatch). Define unha paleta de cores base. No exemplo, escollemos Colors.teal, o que fai que os elementos como AppBar ou botóns teñan esa cor automaticamente.
• textTheme: Permite establecer estilos de texto globais. Neste caso personalizamos bodyLarge, que logo aplicaremos na nosa pantalla principal. A cor e o tamaño definidos aquí afectarán a todos os textos que usen ese estilo.
• E moitas outras cousas como iconTheme, appBarTheme, etc.

theme: ThemeData(
  primarySwatch: Colors.teal, // Cor principal usada en AppBar, botóns, etc.
  textTheme: const TextTheme(
    bodyLarge: TextStyle(
      fontSize: 20,
      color: Colors.teal,
    ),
  ),
),

🧾 Aplicar o tema na interface:

Na pantalla principal (PantallaInicio) aplicamos o estilo global definido usando:

Text(
  'Texto calquera...',
  style: Theme.of(context).textTheme.bodyLarge,
),

Theme.of(context) accede ao tema actual definido no MaterialApp, e con textTheme.bodyLarge obtemos o estilo personalizado que configuramos.

📌 Velaquí o exemplo completo:

🔗 Ver o código en DartPad

🖲️ Botóns básicos: ElevatedButton

Os botóns son elementos interactivos esenciais nunha interface de usuario. Flutter ofrece varios tipos de botóns, sendo ElevatedButton un dos máis comúns no deseño de Material Design. Un ElevatedButton ten unha sombra que o fai parecer «elevado» sobre a superficie.

Propiedades clave:

• onPressed: Unha función de callback que se executa cando o usuario preme o botón. Se esta propiedade é null, o botón aparecerá deshabilitado.
• child: O widget que se mostra dentro do botón (normalmente un Text ou un Icon).

🔗 Onde saber máis:

• Widget ElevatedButton

📌 Exemplo: ElevatedButton con acción

Partindo do exemplo anterior, eliminamos o texto e, no seu lugar poñemos un ‌ElevatedButton.

• onPressed:: Define a acción que se executará cando o botón sexa premido. Neste caso, chamamos ao método privado _mostrarMensaxe(), que simplemente amosa por consola a mensaxe: «Botón pulsado!».
• child:: É o contido do botón. Neste caso, un texto sinxelo que di «Preme aquí».

🔗 Ver o código en DartPad

🧭 Navegación entre 2 Pantallas: Navigator.push e Navigator.pop

As aplicacións móbiles adoitan ter múltiples pantallas (ou «páxinas»). Flutter utiliza un sistema de navegación baseado nunha pila (stack) para xestionar as pantallas.

• Cando navegas a unha nova pantalla, esta engádese á parte superior da pila.
• Cando volves atrás, a pantalla actual é eliminada da pila.

📌 Importante:

• Navigator.push() engade unha nova pantalla á pila, levando ao usuario a ela.
• Navigator.pop() elimina a pantalla actual da pila, devolvendo á pantalla anterior.

🔸 MaterialPageRoute: Que é e para que serve?

MaterialPageRoute é unha clase que crea unha nova ruta (pantalla) seguindo o estilo de Material Design, o estilo visual estándar en Flutter para Android.

É o xeito máis habitual e directo de navegar dunha pantalla a outra empregando Navigator.push().

A estrutura adoita ser esta:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const PantallaSecundaria(),
  ),
);

• Navigator.push(...) inicia o proceso de navegación e engade a nova pantalla á pila de rutas.
• context indica o contexto actual dende o cal se lanza a navegación (necesario para saber onde estamos na árbore de widgets)..
• MaterialPageRoute(...) crea unha transición estilo Material Design cara á nova pantalla.
• builder: (context) => const PantallaSecundaria(): é unha función que constrúe o widget da pantalla á que queremos ir. Neste caso, crea unha instancia da clase PantallaSecundaria.

🔗 Onde saber máis:

• Navegación e rutas
• Clase Navigator
• Clase MaterialPageRoute

📌 Exemplo: Ir e volver entre pantallas

🔗 Ver o código en DartPad

📚 Máis información oficial

• Widgets en Flutter
• Navigator & Routing
• Scaffold – documentación oficial
• ThemeData