Skip to content
Branch: master
Clone or download


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



Follow installation instructions here


import 'package:flutter_chips_input/flutter_chips_input.dart';



    initialValue: [
        AppProfile('John Doe', '', '')
    decoration: InputDecoration(
        labelText: "Select People",
    maxChips: 3,
    findSuggestions: (String query) {
        if (query.length != 0) {
            var lowercaseQuery = query.toLowerCase();
            return mockResults.where((profile) {
                return ||;
            }).toList(growable: false)
                ..sort((a, b) =>
        } else {
            return const <AppProfile>[];
    onChanged: (data) {
    chipBuilder: (context, state, profile) {
        return InputChip(
            key: ObjectKey(profile),
            label: Text(,
            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(,
            subtitle: Text(,
            onTap: () => state.selectSuggestion(profile),

To-do list

  • Ability to limit the number of chips
  • 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
  • Overlay doesn't move when input height changes i.e. when chips wrap
  • For some reason Overlay floats above AppBar when scrolling
You can’t perform that action at this time.