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.
Top comments (0)