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

Pub Version GitHub Workflow Status Codecov CodeFactor Grade

GitHub OSS Lifecycle Gitter



Follow installation instructions here


import 'package:flutter_chips_input/flutter_chips_input.dart';



    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
        } else {
            return const <AppProfile>[];
    onChanged: (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