Diálogos en Flutter

Introducción

La clase Dialog del API de Flutter es la clase base en la que apoyarnos cuando queremos mostrar un Diálogo pero raramente la vamos a usar directamente sino que nos apoyaremos en sus subclases AlertDialog y SimpleDialog

AlertDialog y SimpleDialog

En líneas generales, cuando queramos mostrar un diálogo sencillo con un solo widget, quizás con un texto de alerta o un texto de entrada usaremos AlertDialog.

Cuando queramos un diálogo un poquito más evolucionado usaremos la clase SimpleDialog.

Ambos Widgets son mostrados con el método de la clase Material showDialog. Veamos un ejemplo de cada opción.

AlertDialog

Como ejemplo vamos a crear una miniaplicación en la que al pulsar un botón presentaremos un diálogo con un texto de entrada. Al completar el texto cerraremos el diálogo y la vista principal mostrará el valor informado.

Vamos a crear un Stateful llamado MyDialog. En su clase de estado que llamaremos MyDialogState, tendremos una variable de tipo String que contendrá el valor que puede ser fijado desde el TextField de entrada del diálogo.

Vemos que el diálogo es muy básico y tiene como contenido un solo widget por lo que lo más idóneo es usar la clase AlertDialog.

import 'dart:io';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyDialog(title: 'Flutter Demo Diálogo'),
    );
  }
}

class MyDialog extends StatefulWidget {
  MyDialog({Key key, this.title}) : super(key: key);
  final String title;

  @override
  MyDialogState createState() => MyDialogState();
}

class MyDialogState extends State<MyDialog> {
  int _counter = 0;
  String textValue = '?';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Text(textValue)
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showDialog(context);
        },
        child: Icon(Icons.add),
      ),
    );
  }

  _showDialog(BuildContext ctx) {
    showDialog(context: ctx,
        builder: (context) {
          return AlertDialog(
              title: Center(
                  child:Text(
                      "Alerta!!!")),
              content: TextField(
                  decoration: InputDecoration(
                    hintText: textValue,
                  ),
                  onSubmitted: (text){
                    setState(() {
                      textValue=text;
                    });

                    Navigator.pop(ctx);
                  }));
        }
    );
  }

}

Como relevante mencionar el parámetro constructor de AlertDialog content que es el Widget de contenido que vamos a presentar en el diálogo. Nada nos impediría pasarle un contenedor que contuviera varios Widgets pero para eso esta la clase SimpleDialog que veremos a continuación.

SimpleDialog

Vamos a sustituir el método _showDialog anterior que presenta un AlertDialog por este otro que presenta un SimpleDialog:

...
...
 _showDialog(BuildContext ctx) {
    showDialog(
      context: ctx,
        builder: (context) {
          return SimpleDialog(
            title: Center(child: Text("SimpleDialog!!")),
            children: <Widget>[
              Center(child: Text("Un Widget!!!")),
              Center(child: Text("Dos Widgets!!!")),
              Center(child: Text("Tres Widgets!!!")),
              Center(child: FlatButton(child: Text("Ok"), onPressed: () {
                Navigator.pop(ctx);
              })),
            ],
          );
        });
  }
...
...

Observamos que el parámetro content de AlertDialog desaparece y ahora tenemos el parámetro children con un array de Widgets.