flutter_chips_input 1.0.1

Chips Input for Flutter

flutter_chips_input

Chips Input for Flutter

Usage

Installation

Follow installation instructions here

Example

ChipsInput( initialValue: [ AppProfile('John Doe', '[e-mail]', 'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg') ], decoration: InputDecoration( labelText: "Select People", ), 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), ); }, )