La comunidad flutter está haciendo que Flutter sea fuerte y popular a través de sus bibliotecas, lo que hace que el desarrollo sea más rápido y sencillo. Flash es una biblioteca de Flutter que sirve para múltiples propósitos. Se pueden crear Snackbars, tostadas y diálogos con él. Flutter no tiene Toast por defecto. Entonces, usando la biblioteca Flash se puede crear. Con el paquete Flash, puede simplificar todo utilizando un solo paquete. La mejor parte es que se puede personalizar según los requisitos. No necesita trabajar con diferentes paquetes para snackbar o tostadas o diálogo. Se puede hacer fácilmente con Flash. En este artículo, vamos a aprender cómo podemos crear todo esto usando un paquete: Flash.
- Agregar dependencia
Agreguemos la dependencia en el archivo pubspec.yaml , antes de pasar a la parte de codificación.
Dart
dependencies: flash: ^2.0.3+1
No olvide configurarlo ejecutando pub get en la terminal de su IDE de trabajo.
- Importar la biblioteca
Para usar la biblioteca, por supuesto, necesitamos importarla en main.dart o en el archivo que vayas a usar.
Dart
import 'package:flash/flash.dart';
Diálogos:
Siempre fue una tarea aburrida crear ventanas emergentes con showDialog predeterminado. Sin embargo, mostrar diálogos es una tarea sencilla. En el código que se muestra a continuación, se define _showDialogFlash() que muestra el diálogo al invocar showFlashDialog(). Podemos pasar un montón de argumentos a esta función como título, constructor de acción negativa, etc.
Dart
void _showDialogFlash() {
context.showFlashDialog(
title: Text('Flash Dialog'),
content: Text('This is the simplest dialog you can create with Flash.'),
negativeActionBuilder: (context, controller, _) {
return TextButton(
onPressed: () {
controller.dismiss();
},
child: Text("CLOSE"),
);
},
);
}
}
Entonces, esta función se puede invocar cuando lo desee. Por ejemplo, cree un botón que invoque _showDialogFlash() cuando se presione.
Dart
ElevatedButton(
onPressed: () => _showDialogFlash(),
child: Text('Simple Dialog'),
),
Tostadas:
Los brindis son solo ventanas emergentes de mensajes cortos que permanecen visibles incluso cuando la aplicación no está en primer plano. Ahora, podemos crear brindis en Flutter fácilmente usando la biblioteca Flash. Para crear el Toast, cree un elemento secundario y defina una clave global. Envuelva al elemento secundario con Toast y luego pase a FlashTheme, que se devolverá como elemento secundario. Luego, simplemente invoque showToast() en el contexto y use sus propiedades como el mensaje, la duración, etc. Creamos un ElevatedButton llamado «Toast» que, cuando se presiona, muestra el brindis en el contexto de la pantalla actual.
Dart
import 'package:flash/flash.dart';
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
builder: (context, _) {
var child = _!;
final navigatorKey = child.key as GlobalKey<NavigatorState>;
child = Toast(child: child, navigatorKey: navigatorKey);
child = FlashTheme(
child: child,
flashDialogTheme: const FlashDialogThemeData(),
);
return child;
},
theme: ThemeData(
primarySwatch: Colors.green,
),
home: FlashDemo(),
);
}
}
class FlashDemo extends StatefulWidget {
@override
_FlashDemoState createState() => _FlashDemoState();
}
class _FlashDemoState extends State<FlashDemo> {
GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GeeksForGeeks"),
centerTitle: true,
),
key: _key,
body: Container(
child: Center(
child: ElevatedButton(
onPressed: () =>
context.showToast('You have 10 minutes left in the meeting.'),
child: Text('Toast'),
),
)),
);
}
}
Producción:
Barra flash:
La belleza de la biblioteca Flash es que con una sola función, puede crear diferentes tipos de snackbars. Flashbar ahora no está limitado al nivel del suelo, puede mostrarlo en la parte superior o inferior de la pantalla o incluso puede personalizarlo dándole margen, color de fondo, etc. El punto único de crear un snackbar con Flash es que incluso puede dar Introducir en el snackbar lo que llamamos flashbar, con el botón o icono para aceptarlo. En el próximo artículo, veremos los diferentes tipos de flashbars que podemos crear con Flash.
La barra flash básica:
La barra de bocadillos simple que usa Flash se puede crear simplemente usando la función _showBasicFlash () . Toma el constructor como una propiedad que devuelve Flash, que envuelve Flashbar como elemento secundario. Entonces podemos dar cualquier contenido que queramos dentro de la barra flash. _showBasicFlash () toma dos parámetros, uno no puede ser nulo, es decir, la duración, pero el comportamiento se puede omitir ya que ya está definido como flotante. Si no pasamos la duración a la función o fijamos la duración en la función showFlash() , la barra flash permanecerá en la pantalla hasta que se cierre la aplicación.
Dart
void _showBasicFlash({
Duration? duration,
flashStyle = FlashBehavior.floating,
}) {
showFlash(
context: context,
duration: duration,
builder: (context, controller) {
return Flash(
controller: controller,
behavior: flashStyle,
position: FlashPosition.bottom,
horizontalDismissDirection: HorizontalDismissDirection.horizontal,
child: FlashBar(
content: Text('This is a basic flashbar'),
),
);
},
);
}
Producción:
Barra flash superior:
Bueno, si queremos que la barra de bocadillos tome la entrada desde la parte superior o podemos decir notificaciones emergentes que son importantes en muchas aplicaciones hoy en día. Esto podría hacerse de forma sencilla con Flash. Nuevamente, simplemente usando la función showFlash() . Pero necesitamos decir qué posición queremos: inferior o superior o se pueden pasar valores para ubicar su posición. Creamos una función _showTopFlash() que invoca la función showFlash() . Pasamos el comportamiento de flash con FlashBehavior , usamos FlashBehavior.fixed , también podemos hacerlo flotar. Le dimos cierto estilo y también creamos un TextButton«DISMISS» para descartar la barra flash, podemos hacer lo que queramos según los requisitos o la creatividad.
Dart
void _showTopFlash({FlashBehavior style = FlashBehavior.fixed}) {
showFlash(
context: context,
duration: const Duration(seconds: 2),
persistent: true,
builder: (_, controller) {
return Flash(
controller: controller,
backgroundColor: Colors.white,
brightness: Brightness.light,
barrierColor: Colors.black38,
barrierDismissible: true,
behavior: style,
position: FlashPosition.top,
child: FlashBar(
title: Text('Hey User!'),
content: Text('This is the top Flashbar!'),
primaryAction: TextButton(
onPressed: () {},
child: Text('DISMISS',
style: TextStyle(color: Colors.blue)),
),
),
);
},
);
}
Producción:
Flashbar inferior personalizado:
Flashbar no se detiene aquí cuando se trata de sus propiedades. Aquí, en el código de ejemplo dado, personalizamos la barra flash asignándole colores degradados junto con el ícono de información y el botón de texto «DISMISS» como una propiedad de acción primaria de Flash que descarta la barra flash cuando se presiona. Agrega animaciones a la barra flash, dale estilo, contiene muchas propiedades que pueden cumplir con todos los requisitos.
Dart
void _showCustomFlash() {
showFlash(
context: context,
builder: (_, controller) {
return Flash(
controller: controller,
behavior: FlashBehavior.floating,
position: FlashPosition.bottom,
borderRadius: BorderRadius.circular(8.0),
borderColor: Colors.blue,
backgroundGradient: LinearGradient(
colors: [Colors.pink, Colors.red],
),
forwardAnimationCurve: Curves.easeInCirc,
reverseAnimationCurve: Curves.bounceIn,
child: DefaultTextStyle(
style: TextStyle(color: Colors.white),
child: FlashBar(
title: Text('Hello Flash'),
content: Text('You can put any message of any length here.'),
indicatorColor: Colors.blue,
icon: Icon(
Icons.info_outline_rounded,
color: Colors.white,
),
primaryAction: TextButton(
onPressed: () => controller.dismiss(),
child: Text('DISMISS', style: TextStyle(color: Colors.white)),
),
),
),
);
},
);
}
Producción:
Flashbar con entrada:
En esto, vamos a conocer la interesante propiedad de Flash, incluso podemos ingresar información dentro de la Flashbar. Sí, hará que la interfaz de usuario sea más atractiva. Cada vez que hay un error junto con un error, es posible que desee redirigir al usuario a una página de ayuda o cualquier otra cosa, se puede hacer usando una barra flash simple creada con Flash. La función _flashWithInput() que además llama a showFlashBar() en el contexto, y creó un TextFormField al que se le da el controlador de edición como un controlador y usa primarioActionBuilder para mostrar un IconButton que, cuando se presiona, realizará alguna función. Es fácil personalizarlo según las necesidades.
Dart
void _flashWithInput() {
TextEditingController editingController = TextEditingController();
context.showFlashBar(
barrierColor: Colors.blue,
borderWidth: 3,
behavior: FlashBehavior.fixed,
forwardAnimationCurve: Curves.fastLinearToSlowEaseIn,
title: Text('Hello from Flash'),
content: Column(
children: [
Text('You can put any message of any length here.'),
TextFormField(
controller: editingController,
autofocus: true,
)
],
),
primaryActionBuilder: (context, controller, _) {
return IconButton(
onPressed: () {
print(editingController.text);
editingController.clear();
},
icon: Icon(Icons.send, color: Colors.blue),
);
},
);
}
Producción:
Código completo para Flashbar:
Dart
import 'package:flash/flash.dart';
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
builder: (context, _) {
var child = _!;
final navigatorKey = child.key as GlobalKey<NavigatorState>;
// initializing a Toast and passing it in the FlashTheme
child = Toast(child: child, navigatorKey: navigatorKey);
child = FlashTheme(
child: child,
flashDialogTheme: const FlashDialogThemeData(),
);
return child;
},
title: 'Flash Tutorial',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("GeeksForGeeks"),
centerTitle: true),
body: Container(
padding: const EdgeInsets.all(20.0),
child: Overlay(
// with the help of overlay the background
// will not go blur and the toast can lay
// on the other widgets.
initialEntries: [
OverlayEntry(builder: (context) {
return FlashDemo();
}),
],
)),
);
}
}
class FlashDemo extends StatefulWidget {
@override
_FlashDemoState createState() => _FlashDemoState();
}
class _FlashDemoState extends State<FlashDemo> {
// creating a global Scaffold key
GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Flash Examples',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
SizedBox(
height: 20,
),
ElevatedButton(
// calling function to show the basic flashbar
onPressed: () => _showBasicFlash(),
child: Text('Basic Flashbar'),
),
SizedBox(
height: 10,
),
ElevatedButton(
// show snackbar from top of the screen
onPressed: () => _showTopFlash(),
child: Text('Top Flashbar'),
),
SizedBox(
height: 10,
),
ElevatedButton(
// customize the flashbar
onPressed: () => _showCustomFlash(),
child: Text('Bottom Flashbar'),
),
SizedBox(
height: 10,
),
ElevatedButton(
// take input inside flashbar
onPressed: () => _flashWithInput(),
child: Text('Input Flashbar'),
),
ElevatedButton(
onPressed: () =>
// show toast simply calling showToast in the context
context.showToast('You have 10 minutes left in the meeting.'),
child: Text('Toast'),
),
],
),
),
);
}
void _showBasicFlash({
flashStyle = FlashBehavior.floating,
}) {
showFlash(
context: context,
duration: Duration(seconds: 3),
builder: (context, controller) {
return Flash(
controller: controller,
behavior: flashStyle,
position: FlashPosition.bottom,
horizontalDismissDirection: HorizontalDismissDirection.horizontal,
child: FlashBar(
content: Text('This is a basic flashbar'),
),
);
},
);
}
void _showTopFlash() {
showFlash(
context: context,
duration: const Duration(seconds: 2),
builder: (_, controller) {
return Flash(
controller: controller,
backgroundColor: Colors.white,
brightness: Brightness.light,
barrierColor: Colors.black38,
barrierDismissible: true,
behavior: FlashBehavior.fixed,
position: FlashPosition.top,
child: FlashBar(
title: Text('Hey User!'),
content: Text('This is the top Flashbar!'),
primaryAction: TextButton(
onPressed: () {},
child: Text('DISMISS', style: TextStyle(color: Colors.blue)),
),
),
);
},
);
}
void _showCustomFlash() {
showFlash(
context: context,
builder: (_, controller) {
return Flash(
controller: controller,
behavior: FlashBehavior.floating,
position: FlashPosition.bottom,
borderRadius: BorderRadius.circular(8.0),
borderColor: Colors.blue,
backgroundGradient: LinearGradient(
colors: [Colors.pink, Colors.red],
),
forwardAnimationCurve: Curves.easeInCirc,
reverseAnimationCurve: Curves.bounceIn,
child: DefaultTextStyle(
style: TextStyle(color: Colors.white),
child: FlashBar(
title: Text('Hello Flash'),
content: Text('You can put any message of any length here.'),
indicatorColor: Colors.blue,
icon: Icon(
Icons.info_outline_rounded,
color: Colors.white,
),
primaryAction: TextButton(
onPressed: () => controller.dismiss(),
child: Text('DISMISS', style: TextStyle(color: Colors.white)),
),
),
),
);
},
);
}
void _flashWithInput() {
TextEditingController editingController = TextEditingController();
context.showFlashBar(
barrierColor: Colors.blue,
borderWidth: 3,
behavior: FlashBehavior.fixed,
forwardAnimationCurve: Curves.fastLinearToSlowEaseIn,
title: Text('Hello from Flash'),
content: Column(
children: [
Text('You can put any message of any length here.'),
TextFormField(
controller: editingController,
autofocus: true,
)
],
),
primaryActionBuilder: (context, controller, _) {
return IconButton(
onPressed: () {
print(editingController.text);
editingController.clear();
},
icon: Icon(Icons.send, color: Colors.blue),
);
},
);
}
}
Producción:
Esperamos que hayas aprendido algo nuevo hoy y que este artículo te haya sido útil.