Flutter – Widget de chip

Chip es un widget de diseño de materiales que viene integrado con flutter. Simplemente se puede describir como un elemento compacto que contiene un ícono y texto, generalmente un rectángulo redondeado en el fondo. Puede servir para muchos propósitos, como que puede usarse simplemente como un botón, representando a un usuario con un CircleAvatar y texto, o etiquetas de tema en los artículos del blog, etc.

Constructor de clase de chip:

const Chip(
{Key key,
Widget avatar,
@required Widget label,
TextStyle labelStyle,
EdgeInsetsGeometry labelPadding,
Widget deleteIcon,
VoidCallback onDeleted,
Color deleteIconColor,
String deleteButtonTooltipMessage,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
Color backgroundColor,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
MaterialTapTargetSize materialTapTargetSize,
double elevation,
Color shadowColor}
)

Propiedades del widget de chip:

• enfoque automático: esta propiedad toma un valor booleano como objeto para decidir si el widget se seleccionará en el enfoque inicial o no.
• avatar: esta propiedad se mantiene en un widget como el objeto que se mostrará antes de la etiqueta Chip .
• backgroundColor: esta propiedad asigna un color de fondo al widget Chip tomando la clase Color como objeto.
• clipBehavior: esta propiedad toma Clip enum como el objeto para decidir si el contenido dentro del widget Chip se recortará o no.
• deleteButtonTooltipMessage: esta propiedad toma una string como el objeto que se utilizará para la información sobre herramientas del botón Eliminar.
• deleteIcon: esta propiedad toma un widget como el objeto que se mostrará cuando se llame a la función onDelete.
• deleteIconColor: esta propiedad asigna un color al icono de eliminación tomando la clase Color como objeto.
• elevación: este widget tiene un valor doble ya que el objeto decide la altura elevada del widget Chip .
• focusNode: la propiedad focusNode toma la clase FocusNode cuando el objeto asigna un Node de enfoque adicional al widget.
• etiqueta: la propiedad de la etiqueta toma un widget como el objeto que se colocará dentro del widget de chip como elemento principal.
• labelPadding: esta propiedad controla el relleno alrededor de la etiqueta tomando EdgeInsetsGeometry como el objeto.
• labelStyle: la propiedad labelStyle toma la clase TextStyle como el objeto para diseñar el texto de la etiqueta.
• materialTapTargetSize: esta propiedad determina el tamaño del área que se toca al hacer clic. Toma MaterialTapTargetSize como el objeto.
• onDeleted: la propiedad onDelete contiene VoidCalback typedef como objeto. Controla la acción después de tocar el icono de eliminar.
• padding: esta propiedad controla el espacio vacío en el widget Chip . Toma la clase EdgeInsetsGeometry como el objeto.
• shadowColor: Esto controla el color de la sombra debajo del widget Chip . Toma la clase Color como el objeto.
• forma: Esto define la forma del widget Chip . Contiene la clase ShapeBorder como objeto.
• visualDensity: esta propiedad controla la compacidad del widget Chip tomando la clase VisualDensity como objeto.

Ejemplo: 

import 'package:flutter/material.dart';
 
//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          /** Chip Widget **/
          child: Chip(
            elevation: 20,
            padding: EdgeInsets.all(8),
            backgroundColor: Colors.greenAccent[100],
            shadowColor: Colors.black,
            avatar: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetwordImage
            ), //CircleAvatar
            label: Text(
              'GeeksforGeeks',
              style: TextStyle(fontSize: 20),
            ), //Text
          ), //Chip
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: en esta aplicación flutter, el widget principal en el cuerpo es Center, que toma el widget Chip como hijo. Dentro del widget de chip, la propiedad de elevación se establece en 20 px, lo que hace que el widget de chip aparezca elevado con respecto al fondo. Luego tenemos la propiedad de relleno agregando un espacio vacío de 8 px en el Chip . El backgroundColor es greenAccent [400] y el avatar está tomando CircleAvatar que tiene un logotipo de gfg ( NetworkImage). Y, por último, la propiedad de la etiqueta contiene texto cuyo tamaño de fuente es de 20 px. Al hacer todo esto, obtenemos un widget de chip atractivo que se puede encontrar en muchos lugares.