Las insignias se pueden usar para varios propósitos en una aplicación. Por ejemplo, mostrar la cantidad de mensajes, la cantidad de artículos en el carrito, etc. En este artículo, veremos la implementación de insignias en Flutter usando el paquete badges Flutter.
Instale la biblioteca:
En el archivo pubspec.yaml , agregue la biblioteca de distintivos. Luego ejecute pub get para configurar la dependencia.
O simplemente ejecute el siguiente comando en la terminal de su IDE:
flutter pub add badges
Biblioteca de importación:
En main.dart importarlo como:
Dart
import 'package:badges/badges.dart';
Implementación:
Las insignias se pueden crear usando el widget Badge(). Incluye varias propiedades: badgeContent , badgeColor , child , position , etc. En el siguiente ejemplo, estamos creando dos insignias simples.
Dart
Badge( badgeContent: Text( '5', style: TextStyle(color: Colors.white, fontSize: 30), ), badgeColor: Colors.green, child: Icon(Icons.person, size: 50), ), Badge( elevation: 0, position: BadgePosition.topEnd(), padding: EdgeInsetsDirectional.only(end: 0), badgeColor: Colors.transparent, badgeContent: Icon(Icons.error, size: 27.0, color: Colors.red), child: Text( 'This is RTL', style: TextStyle(fontSize: 30), ), ),
Producción:
Ahora, tomemos otro ejemplo, en el que crearemos un ícono de carrito y le agregaremos y eliminaremos elementos. Inicialice _counter en la clase para mostrar el incremento y la disminución de artículos en el carrito.
Dart
int _counter = 0;
Luego creamos dos ElevatedButton.icon(), uno que agrega elementos al carrito y el otro para eliminar elementos. Cada vez que se presionan estos botones, establecemos el nuevo estado usando el método setState() . Ahora usamos el widget Badge() y creamos un ícono de carrito como su hijo encima del cual la insignia se coloca usando la propiedad de posición. También le agregamos animación de diapositivas usando BadgeAnimationType. Pasamos el valor _counter como una string en la propiedad badgeContent .
Dart
Badge(
position: BadgePosition.topEnd(top: 0, end: 3),
animationDuration: Duration(milliseconds: 300),
animationType: BadgeAnimationType.slide,
badgeContent: Text(
_counter.toString(),
style: TextStyle(color: Colors.white),
),
child: IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
print("These are items in your cart");
}),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton.icon(
onPressed: () {
setState(() {
_counter++;
});
},
icon: Icon(Icons.add),
label: Text('Add Items')),
ElevatedButton.icon(
onPressed: () {
if (_counter > 0) {
setState(() {
_counter--;
});
}
},
icon: Icon(Icons.remove),
label: Text('Remove Items')),
],
),
),
Producción:
Insignia cuadrada con dirección:
También podemos personalizar las formas de las insignias. En el siguiente ejemplo, estamos creando una insignia de forma cuadrada con colores degradados y animación agregada junto con la duración.
Dart
Badge( padding: EdgeInsets.all(6), gradient: LinearGradient(colors: [ Colors.red, Colors.green, ]), badgeContent: Text( '!', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20, ), ), shape: BadgeShape.square, borderRadius: BorderRadius.circular(10), toAnimate: true, animationType: BadgeAnimationType.scale, animationDuration: Duration(seconds: 2), position: BadgePosition.topStart(top: -15, start: 80), child: Center( child: Text( 'This is a text', style: TextStyle(fontSize: 30), ), ), )
Producción:
Fichas con Badge:
También podemos crear fichas utilizando la biblioteca de insignias. Pero necesitamos usar el widget Chip() para ello. Incluye propiedades: etiqueta , estilo de etiqueta , etc. Podemos personalizarlo según nuestros requisitos. Por ejemplo, podemos darle forma, color de fondo, avatar, etc. Consulte el siguiente ejemplo para comprenderlo mejor.
Dart
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Chip( label: Text( 'Hello', style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( labelPadding: EdgeInsets.all(20), label: Text( 'Hello', style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( avatar: Icon(Icons.delete, color: Colors.white), label: Text( 'Hello', style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( labelStyle: TextStyle(fontSize: 20, letterSpacing: 4), label: Text( 'Hello', style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), ], )
Producción:
Código fuente completo:
Dart
import 'package:badges/badges.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _counter = 0;
bool showElevatedButtonBadge = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Badge(
position: BadgePosition.topEnd(top: 10, end: 10),
badgeContent: null,
child: IconButton(
icon: const Icon(Icons.menu),
onPressed: () {},
),
),
title:
const Text('GeeksForGeeks', style: TextStyle(color: Colors.white)),
backgroundColor: Colors.green,
centerTitle: true,
),
body: Column(
children: <Widget>[
SizedBox(
height: 100,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Chip(
label: Text(
'Hello',
style: TextStyle(color: Colors.white),
),
padding: EdgeInsets.all(0),
backgroundColor: Colors.blue),
Chip(
labelPadding: EdgeInsets.all(20),
label: Text(
'Hello',
style: TextStyle(color: Colors.white),
),
padding: EdgeInsets.all(0),
backgroundColor: Colors.blue),
Chip(
avatar: Icon(Icons.delete, color: Colors.white),
label: Text(
'Hello',
style: TextStyle(color: Colors.white),
),
padding: EdgeInsets.all(0),
backgroundColor: Colors.blue),
Chip(
labelStyle: TextStyle(fontSize: 20, letterSpacing: 4),
label: Text(
'Hello',
style: TextStyle(color: Colors.white),
),
padding: EdgeInsets.all(0),
backgroundColor: Colors.blue),
],
),
ListTile(
trailing: Padding(
padding: const EdgeInsets.only(left: 20),
child: Icon(
Icons.arrow_forward_ios,
size: 14,
color: Colors.black,
),
),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Messages"),
Badge(
elevation: 0,
shape: BadgeShape.circle,
padding: EdgeInsets.all(7),
badgeContent: Text(
"2",
style: TextStyle(color: Colors.white),
),
),
],
),
),
Badge(
position: BadgePosition.topEnd(top: 0, end: 3),
animationDuration: Duration(milliseconds: 300),
animationType: BadgeAnimationType.slide,
badgeContent: Text(
_counter.toString(),
style: TextStyle(color: Colors.white),
),
child: IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
print("These are items in your cart");
}),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton.icon(
onPressed: () {
setState(() {
_counter++;
});
},
icon: Icon(Icons.add),
label: Text('Add Items')),
ElevatedButton.icon(
onPressed: () {
if (_counter > 0) {
setState(() {
_counter--;
});
}
},
icon: Icon(Icons.remove),
label: Text('Remove Items')),
],
),
),
SizedBox(
height: 20,
),
Badge(
badgeContent: Text(
'5',
style: TextStyle(color: Colors.white, fontSize: 30),
),
badgeColor: Colors.green,
child: Icon(Icons.person, size: 50),
),
SizedBox(
height: 50,
),
Center(
child: Badge(
elevation: 0,
position: BadgePosition.topEnd(),
padding: EdgeInsetsDirectional.only(end: 0),
badgeColor: Colors.transparent,
badgeContent: Icon(Icons.error, size: 27.0, color: Colors.red),
child: Text(
'This is RTL',
style: TextStyle(fontSize: 30),
),
),
),
],
),
);
}
}
Producción:
