🏆 RETO: El Clásico Hola Mundo

🎯 Desafío #3: La Terminal de Control (Flutter)

Toda banda necesita un panel de control visual. En este reto, abandonamos la consola de texto para crear una interfaz real donde podamos ver el estado del atraco.

Misión_Briefing [Avanzado]

"Crea una pantalla básica en Flutter que tenga un AppBar con el título 'Panel de Control' y un botón central que, al ser pulsado, cambie el texto de 'Esperando...' a '¡PLAN EN MARCHA!'."

Ver explicación y código 🛠️ (¡No hagas spoiler!)

🏗️ Paso 1: Análisis

Para que el texto cambie en pantalla al pulsar un botón, necesitamos un StatefulWidget. Los StatelessWidget son estáticos y no permiten actualizar la interfaz tras el renderizado inicial. ⚙️ Paso 2: Implementación

Definiremos una variable de tipo String y usaremos el método setState() dentro del evento onPressed del botón para notificar a Flutter que debe redibujar el widget. 🚀 Paso 3: Optimización

Separar la lógica del estado del diseño visual hace que el código sea más mantenible a medida que la App crece. 💻 Código de la Solución


import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: PanelControl()));

class PanelControl extends StatefulWidget {
  @override
  _PanelControlState createState() => _PanelControlState();
}

class _PanelControlState extends State<PanelControl> {
  String mensaje = "Esperando...";

  void activarPlan() {
    setState(() {
      mensaje = "¡PLAN EN MARCHA!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Panel de Control"), backgroundColor: Colors.red),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(mensaje, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: activarPlan,
              child: Text("EJECUTAR PLAN"),
            ),
          ],
        ),
      ),
    );
  }
}