El cuadro de diálogo es un tipo de widget que aparece en la ventana o la pantalla que contiene información crítica o puede solicitar cualquier decisión. Cuando aparece un cuadro de diálogo, todas las demás funciones se desactivan hasta que cierre el cuadro de diálogo o proporcione una respuesta. Usamos un cuadro de diálogo para un tipo diferente de condición, como una notificación de alerta o una notificación simple en la que se muestran diferentes opciones, o también podemos crear un cuadro de diálogo que se puede usar como una pestaña para mostrar el cuadro de diálogo.
Tipos de diálogos en un aleteo
- Diálogo de alerta
- Diálogo simple
- mostrarDiálogo
Diálogo de alerta
El cuadro de diálogo de alerta informa al usuario sobre cualquier condición que requiera reconocimiento. El diálogo de alerta contiene un título opcional y una lista opcional de acciones. Tenemos diferentes no de acciones como nuestros requisitos. A veces, el contenido es demasiado grande en comparación con el tamaño de la pantalla, por lo que para resolver este problema es posible que tengamos que usar la clase expandida .
Propiedades:
- Título: siempre se recomienda que el título de nuestro diálogo sea lo más breve posible. Será fácilmente comprensible para el usuario.
- Acción: Se utiliza para mostrar el contenido de la acción a realizar.
- Contenido: el contenido define el cuerpo del widget alertDialog .
- Forma: se utiliza para definir la forma de nuestro cuadro de diálogo, ya sea circular, curvo y muchos más.
Constructor:
AlertDialog(
{
Key key,
Widget title,
EdgeInsetsGeometry titlePadding,
TextStyle titleTextStyle,
Widget content,
EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
TextStyle contentTextStyle,
List<Widget> actions,
EdgeInsetsGeometry actionsPadding: EdgeInsets.zero,
VerticalDirection actionsOverflowDirection,
double actionsOverflowButtonSpacing,
EdgeInsetsGeometry buttonPadding,
Color backgroundColor,
double elevation,
String semanticLabel,
EdgeInsets insetPadding: _defaultInsetPadding,
Clip clipBehavior: Clip.none,
ShapeBorder shape,
bool scrollable: false
}
)
Este es el fragmento de código para crear un cuadro de diálogo.
Dart
AlertDialog(
title: Text('Welcome'), // To display the title it is optional
content: Text('GeeksforGeeks'), // Message which will be pop up on the screen
// Action widget which will provide the user to acknowledge the choice
actions: [
FlatButton( // FlatButton widget is used to make a text to work like a button
textColor: Colors.black,
onPressed: () {}, // function used to perform after pressing the button
child: Text('CANCEL'),
),
FlatButton(
textColor: Colors.black,
onPressed: () {},
child: Text('ACCEPT'),
),
],
),
Producción:
Diálogo de alerta
Diálogo simple
Un cuadro de diálogo simple permite al usuario elegir entre diferentes opciones. Contiene el título que es opcional y se presenta encima de las opciones. Podemos mostrar opciones usando el relleno también. El relleno se usa para hacer que un widget sea más flexible.
Propiedades:
- Título: siempre se recomienda que el título de nuestro diálogo sea lo más breve posible. Será fácilmente comprensible para el usuario.
- Forma: se utiliza para definir la forma de nuestro cuadro de diálogo, ya sea circular, curva y muchas más.
- backgroundcolor: Se utiliza para establecer el color de fondo de nuestro cuadro de diálogo.
- TextStyle: Sirve para cambiar el estilo de nuestro texto.
Constructor:
const SimpleDialog(
{
Key key,
Widget title,
EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
TextStyle titleTextStyle,
List<Widget> children,
EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
Color backgroundColor,
double elevation,
String semanticLabel,
ShapeBorder shape
}
)
Aquí está el código de fragmento para el diálogo simple
Dart
SimpleDialog(
title:const Text('GeeksforGeeks'),
children: <Widget>[
SimpleDialogOption(
onPressed: () { },
child:const Text('Option 1'),
),
SimpleDialogOption(
onPressed: () { },
child: const Text('Option 2'),
),
],
),
Producción:
Diálogo simple
mostrarDiálogo
Básicamente solía cambiar la pantalla actual de nuestra aplicación para mostrar el cuadro de diálogo emergente. Debe llamar antes de que aparezca el cuadro de diálogo. Sale de la animación actual y presenta una nueva animación de pantalla. Usamos este cuadro de diálogo cuando queremos mostrar una pestaña que abrirá cualquier tipo de cuadro de diálogo, o creamos una pestaña frontal para mostrar el proceso en segundo plano.
Propiedades:
- Generador: devuelve el elemento secundario en lugar de crear un argumento secundario.
- Barriercolor: Define el color de barrera modal que oscurece todo en el diálogo.
- useSafeArea: se asegura de que el cuadro de diálogo use el área segura de la pantalla sin superponerse al área de la pantalla.
Constructor:
Future<T> showDialog <T>(
{
@required BuildContext context,
WidgetBuilder builder,
bool barrierDismissible: true,
Color barrierColor,
bool useSafeArea: true,
bool useRootNavigator: true,
RouteSettings routeSettings,
@Deprecated(It returns the child from the closure provided to the builder class ) Widget child
}
)
Aquí está el fragmento de la función showDialog.
Dart
showDialog(
context: context,
builder: (BuildContext context) {
return Expanded(
child: AlertDialog(
title: Text('Welcome'),
content: Text('GeeksforGeeks'),
actions: [
FlatButton(
textColor: Colors.black,
onPressed: () {},
child: Text('CANCEL'),
),
FlatButton(
textColor: Colors.black,
onPressed: () {},
child: Text('ACCEPT'),
),
],
),
);
},
);
Producción:
Diferencia clave
Diálogo de alerta
- Se utiliza para mostrar cualquier tipo de notificación de alerta.
- Podemos dar la opción de reaccionar a la ventana emergente de alerta como el botón de aceptar o rechazar.
Diálogo simple
- Se utiliza para mostrar opciones simples como un cuadro de diálogo.
- Hay diferentes opciones para elegir y realizar funciones de acuerdo con ellas. La opción puede ser simple como elegir entre diferentes correos electrónicos.
Mostrar diálogo
- Se utiliza para crear una opción que abrirá un cuadro de diálogo.
- Al usar esto, podemos mostrar diferentes tipos de cuadros de diálogo como alertDialog y SimpleDialog como un widget secundario.