material_search 0.2.8

Implements part of the material search pattern with flutter widgets.

material_search #

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

Example

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

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);
      },
    ),
  ));
}

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;
        });
      },
    ),
  ));
}

Notes #

MaterialSearchInput takes the same arguments as MaterialSearch, and a few more.

8
likes
55
pub points
87%
popularity

Implements part of the material search pattern with flutter widgets.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

ian.naph@gmail.com

License

MIT (LICENSE)

Dependencies

flutter, meta, mockito

More

Packages that depend on material_search