diegoRodicio

View Categories

🏗️ Estrutura dunha pantalla con Scaffold

🏗️ Organizar unha pantalla

No Tema 3.2 aprendemos a combinar widgets para crear o contido dunha aplicación. Agora imos aprender a organizar os diferentes elementos dunha pantalla, como a barra superior, o contido principal, os botóns, os menús e os avisos.

🏗️ Para iso, utilizaremos o widget Scaffold, que proporciona a estrutura básica dunha pantalla en Flutter.

Debemos distinguir dous widgets:

  • MaterialApp: configura a aplicación, por exemplo, o seu tema e a pantalla inicial.
  • Scaffold: organiza os elementos dunha pantalla, como a barra superior, o contido ou os botóns.

Cada pantalla da aplicación terá normalmente o seu propio Scaffold. Dentro del colocaremos os diferentes elementos que queremos mostrar.

🧩 As pezas principais

Parámetro de ScaffoldQue colocamos nel?
appBarA barra superior, normalmente unha AppBar.
bodyO contido principal: unha lista, unha columna, un widget propio…
floatingActionButtonBotón para unha acción destacada.
floatingActionButtonLocationPosición dese botón.
drawer / endDrawerMenú lateral ao inicio ou ao final; en galego, esquerda ou dereita.
bottomNavigationBarWidget da barra inferior.
bottomSheetPanel que permanece visible na parte inferior.
backgroundColorCor de fondo da pantalla.

📌 Unha SnackBar non é un parámetro de Scaffold. Mostrámola mediante ScaffoldMessenger, como veremos neste tema.

🧪 A estrutura mínima

Scaffold(
  appBar: AppBar(title: const Text('IES San Mamede')),
  body: const SafeArea(
    // Evita zonas do dispositivo que poidan tapar o contido.
    child: Center(child: Text('Benvidos a 2º DAM')),
  ),
)

Pantalla básica con Scaffold, AppBar e SafeArea
Pantalla básica con Scaffold, AppBar e SafeArea

📚 Consulta: