Description:

material search

material_search #
Implements part of the material search pattern with flutter widgets.
https://material.io/guidelines/patterns/search.html

Getting Started #
For help getting started with Flutter, view our online documentation.
For help on editing package code, view the documentation.
Example #
App #
Checkout the Example app
Raw Material Search #
import 'package:material_search/material_search.dart';

const _list = const [
'Igor Minar',
'Brad Green',
'Dave Geddes',
'Naomi Black',
'Greg Weber',
'Dean Sofer',
'Wes Alvaro',
'John Scott',
'Daniel Nadasi',
];

void main() {
runApp(new Scaffold(
body: new MaterialSearch<String>(
placeholder: 'Search', //placeholder of the search bar text input

getResults: (String criteria) async {
var list = await _fetchList(criteria);
return list.map((name) => new MaterialSearchResult<String>(
value: name, //The value must be of type <String>
text: name, //String that will be show in the list
icon: Icons.person,
)).toList();
},
//or
results: _list.map((name) => new MaterialSearchResult<String>(
value: name, //The value must be of type <String>
text: name, //String that will be show in the list
icon: Icons.person,
)).toList(),

//optional. default filter will look like this:
filter: (String value, String criteria) {
return value.toString().toLowerCase().trim()
.contains(new RegExp(r'' + criteria.toLowerCase().trim() + ''));
},
//optional
sort: (String value, String criteria) {
return 0;
},
//callback when some value is selected, optional.
onSelect: (String selected) {
print(selected);
},
//callback when the value is submitted, optional.
onSubmit: (String value) {
print(value);
},
),
));
}
copied to clipboard
Material Search Input #
import 'package:material_search/material_search.dart';

const _list = const [
'Igor Minar',
'Brad Green',
'Dave Geddes',
'Naomi Black',
'Greg Weber',
'Dean Sofer',
'Wes Alvaro',
'John Scott',
'Daniel Nadasi',
];

void main() {
String _selected;

runApp(new Scaffold(
body: new MaterialSearchInput<String>(
//placeholder of the input and of the search bar text input
placeholder: 'Search',
//text of the input, to indicate which value is selected
valueText: _selected ?? '',

getResults: (String criteria) async {
var list = await _fetchList(criteria);
return list.map((name) => new MaterialSearchResult<String>(
value: name, //The value must be of type <String>
text: name, //String that will be show in the list
icon: Icons.person,
)).toList();
},
//or
results: _list.map((name) => new MaterialSearchResult<String>(
value: name, //The value must be of type <String>
text: name, //String that will be show in the list
icon: Icons.person,
)).toList(),

//optional. default filter will look like this:
filter: (String value, String criteria) {
return value.toString().toLowerCase().trim()
.contains(new RegExp(r'' + criteria.toLowerCase().trim() + ''));
},
//optional
sort: (String value, String criteria) {
return 0;
},
//callback when some value is selected
onSelect: (String selected) {
if (selected == null) {
//user closed the MaterialSearch without selecting any value
return;
}

setState(() {
_selected = selected;
});
},
),
));
}
copied to clipboard
Notes #
MaterialSearchInput takes the same arguments as MaterialSearch, and a few more.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter