chips_floating_custom 1.2.2 copy "chips_floating_custom: ^1.2.2" to clipboard
chips_floating_custom: ^1.2.2 copied to clipboard

floating bubble elements to make keywords.

ChipsFloating #

pub package

ChipsFloating es un paquete Flutter que te permite mostrar y gestionar palabras clave en forma de burbujas flotantes en tus aplicaciones.

Ejemplo

Instalación #

Para utilizar ChipsFloating en tu proyecto Flutter, agrega la siguiente dependencia en tu archivo pubspec.yaml:

dependencies:
  chips_floating: ^1.2.2 
  • Uso

Para utilizar ChipsFloating, simplemente agrega el widget a tu árbol de widgets y configura sus propiedades según sea necesario:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ChipsFloating Example'),
        ),
        body: Center(
          child: ChipsFloating(
            inputDecoration: InputDecoration(
              labelText: 'Agregar palabra clave',
            ),
            controller: TextEditingController(),
            keywords: [], // Lista de palabras clave
            maxKeywords: 5, // Límite máximo de palabras clave
            maxKeywordsToastMessage: '¡Se alcanzó el límite máximo de palabras clave!',
            displayChipsBelow: true, // Muestra las burbujas debajo del campo de entrada
            chipColor: Colors.blueAccent, // Color de las burbujas
            toastBackgroundColor: Colors.red, // Color de fondo del mensaje de aviso
            toastTextColor: Colors.white, // Color del texto del mensaje de aviso
            deleteIconColorChip: Colors.black, // Color del icono de eliminación en las burbujas
            spacingChip: 8.0, // Espacio horizontal entre las burbujas
            runSpacingChip: 8.0, // Espacio vertical entre las burbujas
            elevationChip: 3, // Elevación de las burbujas
            spacingElement: 10, // Espacio vertical entre los elementos
            directionScroll: Axis.vertical, // Dirección de desplazamiento de las burbujas
            deleteIconChip: Icon(Icons.cancel), // Icono de eliminación en las burbujas
            textStyleChip: TextStyle(color: Colors.white), // Estilo de texto en las burbujas
            borderRadius: BorderRadius.circular(20.0), // Bordes redondos de las burbujas
            fontSizeToast: 14, // Tamaño de fuente para el mensaje de aviso
            createTagOnSubmit: true, // Crear una etiqueta al enviar el formulario
            showSaveBotton: true, // Mostrar un botón de guardar
            textBotton: 'Agregar', // Texto del botón de guardar
            textStyleBotton: TextStyle(fontSize: 16), // Estilo de texto del botón de guardar
            heightBotton: 40, // Altura del botón de guardar
            widthBotton: 100, // Ancho del botón de guardar
            boxDecorationBotton: BoxDecoration(
              color: Colors.blue, // Color de fondo del botón de guardar
              borderRadius: BorderRadius.circular(10.0), // Bordes redondos del botón de guardar
            ),
            spacingTextBotton: 8, // Espacio vertical entre el campo de entrada y el botón de guardar
          ),
        ),
      ),
    );
  }
}



Características #

  • Muestra palabras clave como burbujas flotantes.
  • Permite a los usuarios agregar y eliminar palabras clave.
  • Personalización de colores y comportamiento.
  • Limita el número de palabras clave que se pueden agregar.

Propiedades #

El widget ChipsFloating admite las siguientes propiedades personalizables:

  • inputDecoration: Configuración de decoración para el campo de entrada.
  • controller: Controlador del campo de entrada.
  • displayChipsBelow: Booleano que controla si las burbujas se muestran debajo del campo de entrada.
  • maxKeywords: Límite máximo de palabras clave.
  • keywords: Lista de palabras clave.
  • maxKeywordsToastMessage: Mensaje que se muestra cuando se alcanza el límite máximo de palabras clave.
  • toastBackgroundColor: Color de fondo del mensaje de aviso.
  • toastTextColor: Color del texto del mensaje de aviso.
  • deleteIconColorChip: Color del icono de eliminación en las burbujas.
  • chipColor: Color de las burbujas.
  • spacingChip: Espacio horizontal entre las burbujas.
  • runSpacingChip: Espacio vertical entre las burbujas si hay múltiples filas.
  • elevationChip: Elevación de las burbujas.
  • spacingElement: Espacio vertical entre los elementos.
  • directionScroll: Dirección de desplazamiento de las burbujas.
  • deleteIconChip: Icono de eliminación en las burbujas.
  • textStyleChip: Estilo de texto en las burbujas.
  • fontSizeToast: Tamaño de fuente para el mensaje de aviso.
  • createTagOnSubmit: Booleano que controla si se crea una etiqueta al enviar el formulario.
  • showSaveBotton: Booleano que controla si se muestra un botón de guardar.
  • textBotton: Texto del botón de guardar.
  • textStyleBotton: Estilo de texto del botón de guardar.
  • heightBotton: Altura del botón de guardar.
  • widthBotton: Ancho del botón de guardar.
  • boxDecorationBotton: Decoración del botón de guardar.

Asegúrate de personalizar estas propiedades según tus necesidades específicas en tu aplicación Flutter.

Contribución #

¡Contribuciones son bienvenidas! Si deseas contribuir al desarrollo de ChipsFloating, por favor sigue estos pasos:

Fork el repositorio. Clona tu fork: git clone https://github.com/vidal1101/chips_floating.git. Crea una nueva rama para tu contribución: git checkout -b mi-contribucion. Realiza tus cambios y commit: git commit -m 'Añade una nueva característica'. Empuja tus cambios a tu fork: git push origin mi-contribucion. Crea una solicitud de extracción en el repositorio original.

Autor

Rodrigo Vidal Canales
GitHub: vidal1101

Licencia

Este paquete está disponible bajo la Licencia MIT. Consulta el archivo LICENSE para obtener más información. Agradecimientos

Agradecimientos a la comunidad de Flutter y a todos los desarrolladores que contribuyen a hacer Flutter aún mejor.

2
likes
120
pub points
45%
popularity

Publisher

unverified uploader

floating bubble elements to make keywords.

Homepage

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, fluttertoast

More

Packages that depend on chips_floating_custom