🚀 lib/main.dart: O Punto de Entrada das Aplicacións #

O ficheiro lib/main.dart é o primeiro lugar onde o código comeza a executarse cando se inicia a aplicación.

Entender como está estruturado este ficheiro é crucial para saber onde e como comezar a construír a túa interface de usuario.

🔸 A Función main(): O Inicio de Todo #

Como en moitas linguaxes de programación, a execución dunha aplicación Flutter comeza sempre cunha función principal chamada main() que, por defecto se atopa no arquivo lib/main.dart do noso proxecto.

main() é o punto de entrada das aplicacións. Cando a aplicación se lanza, o sistema executa esta función primeiro.

// Importamos o paquete principal de Flutter, que contén os widgets de Material Design
import 'package:flutter/material.dart';

// -----------------------------
// 🔹 Punto de entrada da app 🔹
// -----------------------------

// A función main() é o punto inicial da execución en Dart.
// runApp() inicia a aplicación e carga o widget raíz que lle pasamos (neste caso, MiAplicacion).
// MiAplicacion será o widget "raíz" ou principal da nosa aplicación.
void main() {
  runApp(const MiAplicacion()); // Usamos 'const' por boas prácticas de rendemento.
}
// ... (aquí iría a definición da túa clase MiAplicacion e as pantallas)

Neste exemplo:

• void main() é a función principal que se executa ao lanzar a app.
• runApp(...) é unha función de Flutter que inicia a aplicación. É o que lle di ao sistema operativo: “comeza a construír a interface da app usando este widget”.
• MiAplicacion , chamado así neste exemplo, é o primeiro widget que se constrúe.

🔧 A función build(): Como se constrúe a interface #

En Flutter, todos os widgets teñen un método chamado build(), que é o encargado de crear e devolver a interface de usuario (UI) que se verán na pantalla.

Esta función forma parte do ciclo de vida dun widget. Flutter chama automaticamente ao método build():

• Cando o widget se constrúe por primeira vez,
• Cando algo cambia no estado (no caso de StatefulWidget e se chama a setState()),
• Cando se fai hot reload durante o desenvolvemento.

📌 Como funciona o build()? #

• É un método obrigatorio que devolve un widget (pode ser calquera: Scaffold, Text, Column, etc.).
• Recibe como parámetro BuildContext context, que contén información sobre a posición do widget na árbore de widgets, acceso ao tema, navigator, etc.

🔍 Estrutura típica: #

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Exemplo'),
    ),
    body: const Center(
      child: Text('Ola, mundo!'),
    ),
  );
}

🔹 O Widget Raíz da Aplicación #

Despois da función main(), a parte máis importante do ficheiro main.dart é a definición do widget raíz da aplicación.

Este widget é o que runApp() mostrará na pantalla e serve como o contedor principal para toda a túa interface de usuario.

A clase que pasamos a runApp() adoita ser un widget chamado MaterialApp, que configura a aplicación completa: tema, rutas, título, idioma, pantalla inicial, etc.

// -------------------------------------------------------------------
// 🔸 Widget raíz da aplicación: clase principal que lanza a interface 🔸
// -------------------------------------------------------------------

// Usamos StatelessWidget porque esta clase non necesita almacenar estado interno.
class MiAplicacion extends StatelessWidget {
  const MiAplicacion({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp é o contedor principal da app:
    // - Configura o estilo visual segundo o deseño Material de Google.
    // - Define a pantalla inicial coa propiedade 'home:'.
    return MaterialApp(
      title: 'App de Exemplo  - 2º DAM - IES San Mamede', // Título da aplicación (non se mostra sempre)
      home: const PantallaPrincipal(), // A pantalla que se amosará ao abrir a app
    );
  }
}

Case sempre, o widget raíz será un StatelessWidget que, á súa vez, envolverá un MaterialApp (para aplicacións con estilo Material Design, común en Android) ou un CupertinoApp (para aplicacións con estilo iOS).

• StatelessWidget para o Widget Raíz: O widget raíz da aplicación (como MiAplicacion) adoita ser un StatelessWidget porque o seu estado non cambia durante a vida útil da aplicación (simplemente define a configuración xeral, o tema, e a pantalla inicial).
• MaterialApp (ou CupertinoApp): Estes widgets son fundamentais porque proporcionan toda a funcionalidade necesaria para que a túa aplicación se comporte como unha aplicación “real” nun dispositivo. Inclúen:
  • Soporte para temas e estilos (mediante a propiedade theme).
  • Un sistema de navegación (para cambiar entre pantallas).
  • Dirección do texto.
  • Moitas outras configuracións globais.
• home: Dentro de MaterialApp (ou CupertinoApp), a propiedade home é a encargada de especificar cal será a primeira pantalla que se mostrará ao usuario cando se inicie a aplicación. Normalmente, será un Scaffold (ver seguinte punto).
• PantallaInicial é o nome da clase que define esa primeira pantalla (normalmente é un StatelessWidget ou StatefulWidget).
• const MiAplicacion({super.key}): Este é o constructor da clase MiAplicacion.
  1. Ten o mesmo nome que a clase (como sempre ocorre nos constructores en Dart).
  2. A palabra const significa que o obxecto creado é inmutable (non cambia nunca), o cal permite optimizacións de rendemento.
  3. super.key pasa a propiedade key ao constructor da superclase (StatelessWidget), que a pode usar para identificar de forma única o widget na árbore e determinar se hai que reconstruílo ou non.

🖼️ A pantalla inicial: Scaffold #

No home: da app, adoita ir un widget chamado Scaffold, que crea a estrutura visual da pantalla:

// -------------------------------------------------------
// 🔹 Widget da pantalla principal da nosa aplicación 🔹
// -------------------------------------------------------

// Tamén é un StatelessWidget porque a interface non cambia mentres está visible.
class PantallaPrincipal extends StatelessWidget {
  const PantallaPrincipal({super.key});

  @override
  Widget build(BuildContext context) {
    // Scaffold proporciona unha estrutura visual básica (barra superior, corpo, botóns flotantes, etc.)
    return Scaffold(
      // AppBar é a barra superior da pantalla (barra de título)
      appBar: AppBar(
        title: const Text('Pantalla Principal'), // Título que aparece na AppBar
      ),
      // O corpo da pantalla. Neste caso, centramos un texto
      body: const Center(
        child: Text(
          'Esta é a miña primeira app en Flutter!', // Texto visible no centro da pantalla
        ),
      ),
    );
  }
}

Scaffold é un widget que proporciona a estrutura visual básica dunha pantalla de Material Design. Pénsao como o “esqueleto” dunha páxina de aplicación móbil.

Elementos que proporciona Scaffold:

• appBar: A barra superior da pantalla, onde podes poñer un título, botóns de navegación, etc.
• body: O contido principal da pantalla. Aquí é onde colocarás a maior parte dos teus widgets visuais.
• E moitos outros.

🔄 Resumo do Proceso de Execución dunha Aplicación Flutter #

Este resumo ofrece unha visión xeral, paso a paso, de como se inicia e constrúe unha aplicación Flutter.

🧠 Punto de entrada: main() #

• A aplicación comeza sempre pola función main().
• Dentro dela, invócase runApp(), que é a función que inicia a aplicación Flutter.
• runApp() necesita que lle pasemos un widget, que será o widget raíz da interface.

🧱 Widget raíz da aplicación #

• O widget raíz é a clase que pasamos a runApp() (por exemplo, MiAplicacion).
• Normalmente é un StatelessWidget, xa que só configura a app e non garda estado interno.
• Esta clase contén o método build(), que é chamado automaticamente por Flutter para construír a interface da aplicación.
• Dentro de build() adoita devolverse un MaterialApp, que será o contedor principal da aplicación.

🏗️ MaterialApp: Configuración global #

• MaterialApp é o widget que configura toda a aplicación:
• Título.
• Tema visual.
• Idioma.
• Rutas (pantallas).
• Pantalla inicial mediante a propiedade home.

🖼️ Pantalla principal #

• A propiedade home de MaterialApp define cal será a primeira pantalla que verá o usuario.
• Esta pantalla normalmente é outra clase que herda de StatelessWidget ou StatefulWidget.
• Dentro desta clase, tamén se define un método build() que retorna un widget Scaffold.

🧩 Scaffold: Estrutura visual da pantalla #

• Scaffold fornece a estrutura básica de cada pantalla:
• Barra superior (appBar).
• Zona central de contido (body).
• Botón flotante (floatingActionButton), se se desexa.
• É o contedor visual máis común nunha app de estilo Material Design.

✅ Conclusión #

A secuencia sería:

main() → runApp() → Widget raíz → MaterialApp → home: pantalla inicial → Scaffold como estrutura visual.

No noso exemplo a secuencia sería: main() → runApp() → MiAplicacion().build() → MaterialApp → home: PantallaPrincipal().build() → Scaffold

Este proceso repítese en todas as apps Flutter, e entender esta cadea é fundamental para comezar a deseñar e programar interfaces.

🧪 Exemplo completo #

🔗 Ver o código en DartPad

Exemplo máis básico sen comentarios #

Este é o exemplo funcional máis simple dunha aplicación Flutter completa. Non inclúe comentarios no código para que sexa máis claro e limpo visualmente, pero imos desglosar o que está facendo:

• Neste exemplo, o Scaffold (estructura visual da pantalla) está incluído dentro do mesmo widget que se lle pasa a runApp() (MiAppSimple). É unha estrutura sinxela, útil para probar rapidamente que todo funciona, pero non é recomendable para apps reais, xa que non separa a lóxica de configuración e a lóxica visual.
• No exemplo anterior, runApp()chama a un widget raíz chamado MiAplicacion, e este non contén directamente a interface visual, senón que define un MaterialApp e delega a visualización real a outro widget: PantallaPrincipal.
• A diferenza do exemplo anterior, non se emprega Center, así que o texto non aparece centrado.

Resumo: Neste exemplo todo está “xunto”. No anterior, a interface principal está separada nun widget distinto, o que facilita organizar o código e reutilizar pantallas.

import 'package:flutter/material.dart';

void main() => runApp(const MiAppSimple());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mi App simple',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mi App lo más simple posible'),
        ),
        body: Text('¡Hola, mundo!'),
      ),
    );
  }
}

🧪 Outro exemplo #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App de Exemplo  - 2º DAM - IES San Mamede',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const PantallaInicial(), // A nosa pantalla de inicio
    );
  }
}

// Definimos a nosa primeira pantalla, que será a que se mostre ao iniciar a app.
class PantallaInicial extends StatelessWidget {
  const PantallaInicial({super.key});

  @override
  Widget build(BuildContext context) {
    // Scaffold proporciona a estrutura visual básica dunha pantalla de Material Design.
    return Scaffold(
      // 1. A barra superior da aplicación
      appBar: AppBar(
        title: const Text('Benvido a Flutter!'), // Título da barra
        backgroundColor: Colors.blue[700], // Cor de fondo da barra
        foregroundColor: Colors.white, // Cor do texto na barra
      ),
      // 2. O contido principal da pantalla
      body: const Center( // Centramos o contido no medio da pantalla
        child: Text(
          'Ola a toda a clase de 2º DAM do IES San Mamede dende a miña segunda aplicación Flutter!',
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
          textAlign: TextAlign.center, // Centrar o texto se ocupa varias liñas
        ),
      ),
      // 3. Un botón flotante de acción (opcional)
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Lóxica que se executa cando se preme o botón
          print('Botón flotante premido!');
        },
        child: const Icon(Icons.add), // Icona do botón
      ),
    );
  }
}

📚 Máis información oficial #

• 📄 Documentación oficial de main() en Dart
• 🚀 Documentación oficial de runApp()
• 🧱 MaterialApp – Flutter API
• 📐 Scaffold – Flutter API
• 🧱 Widget StatelessWidget
• 🚀Guía de inicio rápido de Flutter (que cobre estes conceptos)