Diálogos en Flutter
Tags: flutter, dart, dialogos
Published: 2019-10-27 19:34:54

###Introducción###
La clase [Dialog](https://api.flutter.dev/flutter/material/Dialog-class.html) 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](https://api.flutter.dev/flutter/material/AlertDialog-class.html) y  [SimpleDialog](https://api.flutter.dev/flutter/material/SimpleDialog-class.html)

###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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pgfpu4t3xhrgvgmkhr0t.jpg)

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.

```dart
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:
```dart
...
...
 _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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/52d8n7akf3cs8jpg0nfs.jpg)