flutter_chips_input

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Eine Flutter-Bibliothek, die die Erstellung von Eingabefeldern ermöglicht, in denen Benutzer Chips als Eingabewerte hinzufügen und verwalten können. Sie unterstützt dynamische Hinzufügung, Entfernung und Anpassung von Chips und ist daher ideal für Tags oder auswahlabhängige Formulare geeignet. Das Paket integriert sich nahtlos mit den Material-Design-Komponenten von Flutter und ermöglicht Entwicklern die Definition benutzerdefinierter Chip-Stile, Validierungsregeln und Eingabeverhalten. Es ist besonders nützlich in Szenarien, die eine vom Benutzer gesteuerte Inhaltsmarkierung oder mehrfache Auswahl-Eingaben erfordern.

Anwendungsfälle

Tagging-Systeme
Mehrfachauswahl-Formular-Eingaben
Dynamische Inhaltfilterung
Benutzerdefinierte Stichwort-Eingabe
Formularfeld mit interaktiven Chips
Mit vorgeschlagenen Tags suchen

Hauptmerkmale

Interaktiver Chip-Eingabepunkt
Anpassbare Chip-Stilisierung
Echtzeit-Chip-Verwaltung
Unterstützung für Validierung
Erweiterbare Eingabehandhabung
Einfache Integration mit bestehenden Formularen

Geeignet für

Entwickler, die tagbasierte Benutzeroberflächen erstellen
Formulare, die mehrere Auswahlmöglichkeiten erfordern
Anwendungen mit dynamischer Benutzereingabe
UIs, die visuelle Rückmeldung bei Eingaben benötigen
Teams, die Flutter für mobile Apps verwenden

Hinweise

Eingeschränkte Dokumentation zum plattformspezifischen Verhalten
Keine integrierte Autovervollständigungsfunktion
Benötigt manuelle Handhabung der Chip-Datenpersistenz
Für komplexe Layouts kann zusätzliche Styling notwendig sein
Nicht für sehr große Datensätze optimiert

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Flutter library for building input fields with InputChips as input options.

Usage

Installation

Follow installation instructions here

Import

import 'package:flutter_chips_input/flutter_chips_input.dart';

Example

ChipsInput

ChipsInput(
    initialValue: [
        AppProfile('John Doe', 'jdoe@flutter.io', 'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg')
    ],
    decoration: InputDecoration(
        labelText: "Select People",
    ),
    maxChips: 3,
    findSuggestions: (String query) {
        if (query.length != 0) {
            var lowercaseQuery = query.toLowerCase();
            return mockResults.where((profile) {
                return profile.name.toLowerCase().contains(query.toLowerCase()) || profile.email.toLowerCase().contains(query.toLowerCase());
            }).toList(growable: false)
                ..sort((a, b) => a.name
                    .toLowerCase()
                    .indexOf(lowercaseQuery)
                    .compareTo(b.name.toLowerCase().indexOf(lowercaseQuery)));
        } else {
            return const <AppProfile>[];
        }
    },
    onChanged: (data) {
        print(data);
    },
    chipBuilder: (context, state, profile) {
        return InputChip(
            key: ObjectKey(profile),
            label: Text(profile.name),
            avatar: CircleAvatar(
                backgroundImage: NetworkImage(profile.imageUrl),
            ),
            onDeleted: () => state.deleteChip(profile),
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        );
    },
    suggestionBuilder: (context, state, profile) {
        return ListTile(
            key: ObjectKey(profile),
            leading: CircleAvatar(
                backgroundImage: NetworkImage(profile.imageUrl),
            ),
            title: Text(profile.name),
            subtitle: Text(profile.email),
            onTap: () => state.selectSuggestion(profile),
        );
    },
)

To-do list

[x] Ability to limit the number of chips
[x] Overlay doesn't move when input height changes i.e. when chips wrap
[ ] Create a FormField implementation (ChipsInputField) to be used within Flutter Form Widget

Known Issues

Deleting chips with keyboard on IOS makes app to crush (Flutter Issue with special characters used as replacement characters). Already reported #1
For some reason Overlay floats above AppBar when scrolling

Pakete, Repositories und App-Kategorien suchen