🧩 Construír unha interface con widgets

Os widgets son os bloques básicos cos que se constrúe a interface de usuario en Flutter. Un texto, un botón, unha imaxe ou mesmo a organización dos elementos na pantalla defínense mediante widgets.

Por exemplo:

Un widget pode mostrar contido, como Text; organizar outros widgets, como Column; ou formar a estrutura dunha pantalla, como Scaffold.

Por iso, unha das ideas máis coñecidas de Flutter é «Todo é un widget»: practicamente todos os elementos que forman a interface se constrúen combinando widgets.

🌳 A árbore de widgets

No Tema 3.1 usamos MaterialApp, Scaffold e Text. Agora combinaremos máis widgets para construír unha pantalla.

Ao colocar uns widgets dentro doutros formamos unha árbore. Chamamos pai ao que contén outro widget e fillo ao que está dentro.

• child recibe un widget, como ocorre en Center.
• children recibe unha lista de widgets, como ocorre en Column.
• Outros parámetros tamén reciben widgets: body é o nome dun parámetro de Scaffold, non un widget.

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Center                 ← valor de body
        └── Column
            ├── Text
            ├── SizedBox
            └── ElevatedButton
                └── Text

🧪 Un primeiro exemplo

Column coloca os fillos en vertical. SizedBox deixa espazo entre eles. O botón está desactivado porque onPressed vale null; veremos as accións no apartado de botóns.

🔗 DartPad:

• https://dartpad.dev/?id=28eea974defbff70ae89ec916e9e0eba.

🔒 Widgets e cambios na interface

Os widgets son inmutables: unha vez creados, os seus datos non se modifican. Cando cambian os datos, Flutter pode reconstruír esa parte da interface con novos widgets e actualizar a pantalla.

• Un StatelessWidget describe a interface cos datos que recibe, sen gardar estado mutable propio. Pode mostrar outro texto se o pai lle pasa un novo valor.

• Cando a interface necesita cambiar como resposta a unha acción —como un contador que aumenta ao premer un botón— é necesario xestionar o estado. Para iso utilizaremos StatefulWidget, que veremos no Tema 3.3.

  
  

📚 Consulta:

• Introdución aos widgets → https://docs.flutter.dev/ui/widgets-intro.