Crear ventana emergente de información, alerta con flutter

Tiempo de lectura: 2 minutos

Para crear una ventana emergente, de alertas o información en flutter, es muy sencillo siguiendo los siguientes pasos:

Primero crearemos el diseño de la ventana emergente:

El código del Widget es el siguiente:

class Alert extends StatelessWidget {

  Alert({Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  AlertDialog(
        title: Text("DevCodeLight"),
        content: Text("Contenido de la ventana para DevCodeLight"),
        backgroundColor: Colors.greenAccent,
        actions: <Widget>[
          TextButton(
            onPressed: () {
              //escribimos la ruta a la que queremos ir, una vez pulsado el botón OK
              Navigator.pushNamed(context, '/login');
            },
            child: const Text('OK'),
          ),
        ]
    );
  }
}

Después hacemos la llamada a esta ventana emergente o Widget, donde vayamos a necesitarlo, cómo por ejemplo a consecuencia de púlsar un botón

class Login extends StatelessWidget {
  Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("entro dentro de login");
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body:Center(
        child:Container(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => Alert(),
            );
          },
          child: Padding(
            padding: EdgeInsets.all(15),
            child: Text('Abrir ventana emergente'),
          ),
        ),
      ),
      ),
    );
  }
}

Una vez añadida la ventana emergente dentro de la acción onPressed de un botón, el resultado es el siguiente:

Espero que os sirva de ayuda, que tengáis un feliz día!