# flutter_chips_input

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 `` 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

## Libraries

flutter_chips_input

## Dart

dart:ui
  Built-in types and core primitives for a Flutter application. [...]

### Core

dart:async
  Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
  Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
  Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
  Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
  Interact with developer tools such as the debugger and inspector. [...]
dart:math
  Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
  Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

### VM

dart:io
  File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
  Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]