En este artículo, exploraremos los mensajes de error de Flash en Flutter personalizando un mensaje de tipo ScaffoldMessenger.
Vamos a implementar la siguiente estructura:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png',height: 300,width: 350,),
Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content: Text(
¡Este nombre de usuario no se encuentra!)));
},
child: const Text('Show Flash Error Message')),
),
],
),Dentro de ElevatedButton, agregaremos el estilo y la función onPressed. En esta función, crearemos un método SnackBar() simple. En este método, agregaremos contenido que es igual al texto '¡Este nombre de usuario no se encuentra! Por favor, inténtelo de nuevo más tarde.
Ahora, esta vez todos son iguales pero solo cambios en SnackBar(). Dentro de SnackBar(), agregaremos un comportamiento igual a SnackBarBehavior.floating y contenido igual al widget Container. En este widget, agregaremos relleno, altura y el BoxDecoration con el color azul y el radio del borde circular.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar( SnackBar(
behavior: SnackBarBehavior.floating,
content: Container(
padding: const EdgeInsets.all(8),
height: 70,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: const Center(
child: Text(
'This Username is not found! Please try again later'),
),
),
));
},
child: const Text('Show Flash Error Message')),Por último, pero no menos importante, esta vez haremos otros cambios en SnackBar() en ElevatedButton(). En el interior, agregaremos un color de fondo transparente, el comportamiento es igual a SnackBarBehavior.floating, la elevación es 0 y el contenido es igual al widget Stack(). Dentro del widget, agregaremos alineación en el centro, clipBehavior en nulo. También agregaremos un widget de Row. En este widget, agregaremos una Columna. En esta columna, agregaremos dos widgets de texto.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.transparent,
behavior: SnackBarBehavior.floating,
elevation: 0,
content: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
padding: const EdgeInsets.all(8),
height: 70,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: Row(
children: [
const SizedBox(
width: 48,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Oops Error!',
style: TextStyle(
fontSize: 18, color: Colors.white),
),
Text(
'This Username is not found! Please try again later',
style: TextStyle(
fontSize: 14, color: Colors.white),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
Positioned(
bottom: 25,
left: 20,
child: ClipRRect(
child: Stack(
children: [
Icon(
Icons.circle,
color: Colors.red.shade200,
size: 17,
)
],
),
)),
Positioned(
top: -20,
left: 5,
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: 30,
width: 30,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.all(Radius.circular(15)),
),
),
const Positioned(
top: 5,
child: Icon(
Icons.clear_outlined,
color: Colors.white,
size: 20,
))
],
)),
],
),
));
},
child: const Text('Show Flash Error Message')),Luego, agregaremos un widget Posicionado. En este widget, agregaremos la parte inferior es 25 y la izquierda es 20. En este elemento secundario, agregaremos ClipRRect y dentro agregaremos un ícono de círculo. Además, crearemos un widget posicionado más. En este widget, agregaremos un ícono claro.
Artículo original:
https://medium.flutterdevs.com/flash-error-messages-in-flutter-6ac85f23c963?source=email-984912ac9124-1655534856076-digest.reader-9c0629646149-6ac85f23c963----0-73------------------348a6c66_df3f_422c_851b_e727ad5825b8-1-&gi=dea632d63ac7
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter