El cuadro de diálogo de alerta informa al usuario sobre la situación que requiere confirmación. Alert Box es un aviso que requiere la confirmación del usuario. El uso muy básico del cuadro de alerta se usa cuando cerramos la aplicación, por lo general, se nos notifica con un aviso si queremos salir o no. Esa es una caja de alerta.
El código agregado a continuación muestra cómo realizar el cuadro de diálogo de alerta en un aleteo. He usado un botón (botón elevado en aleteo) para activar el cuadro de diálogo de alerta. En su propiedad presionada, tenemos que usar el widget showDialog de flutter. Se necesita contexto y un constructor. En el generador, proporcionamos el widget AlertDialog con título , contenido (Descripción de un título) y acciones (botones Sí o no), y nuestro cuadro de diálogo de alerta está listo para usar.
Propiedades clave del cuadro de diálogo Alterar:
- comportamiento:
- título:
- contenido: Esto da un mensaje/descripción sobre el título que ha proporcionado al cuadro de diálogo Alerta.
- backgroundColor: proporciona el color de fondo al widget en el que se está utilizando.
- elevacion : Elevación proporcionó altura al widget, le da una sombra predeterminada al widget.
Flutter proporciona su propio widget de diálogo que se usa para mostrar el cuadro de diálogo.
Ejemplo:
Dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GeeksForGeeks"),
backgroundColor: Colors.green,
),
// ignore: avoid_unnecessary_containers
body: Container(
child: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: const Text("Alert Dialog Box"),
content: const Text("You have raised a Alert Dialog Box"),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Container(
color: Colors.green,
padding: const EdgeInsets.all(14),
child: const Text("okay"),
),
),
],
),
);
},
child: const Text("Show alert Dialog box"),
),
// RaidedButton is deprecated and should not be used
// Instead use ElevatedButton
// child: RaisedButton(
// onPressed: () {
// showDialog(
// context: context,
// builder: (ctx) => AlertDialog(
// title: const Text("Alert Dialog Box"),
// content: const Text("You have raised a Alert Dialog Box"),
// actions: <Widget>[
// FlatButton is deprecated and should not be used
// Instead use TextButton
// FlatButton(
// onPressed: () {
// Navigator.of(ctx).pop();
// },
// child: const Text("okay"),
// ),
// ],
// ),
// );
// },
// child: const Text("Show alert Dialog box"),
// ),
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por AkashDubey3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA