material_search 0.2.8

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 97

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.

[0.2.8] - 03/09/2018

  • chore(): Update mockito and dart, closes #30

[0.2.7] - 17/05/2018

  • chore(): Update .gitignore to new dart_tool pub cache #23

[0.2.6] - 17/05/2018

  • refactor(MaterialSearch): Allow Overriding leading widget for Appbar #19

[0.2.5] - 11/05/2018

  • feat(MaterialSearch.onSubmit) #17
  • refactor(MaterialSearch): make bg color and icon color optional #18

[0.2.4] - 29/04/2018

  • Respect autovalidate attribute from Form.of(context)

[0.2.3] - 16/04/2018

  • Fix auto documentation because of bad validation code

[0.2.2] - 16/04/2018

  • type '(String, String) => bool' is not a subtype of type '(dynamic, String) => bool' #11

[0.2.1] - 19/02/2018

  • pubspec.yaml patches

[0.2.0] - 19/02/2018

  • MaterialSearchInput flutter upgrade #8
  • Example app #7
  • Fix bug when ommiting getResults option #6
  • Allow Icon on MaterialSearchResult #5
  • MaterialSearchInput form validation #4
  • Add a few unit test assertions #1

[0.1.0] - 22/01/2018

getResults option

[0.0.2] - 18/01/2018

Updated basic info of the package

[0.0.1] - 18/01/2018

Published basic version of the package

example/lib/main.dart

import 'package:flutter/material.dart';

import 'package:material_search/material_search.dart';

void main() => runApp(new ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Material Search Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Material Search Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _names =  [
    'Igor Minar',
    'Brad Green',
    'Dave Geddes',
    'Naomi Black',
    'Greg Weber',
    'Dean Sofer',
    'Wes Alvaro',
    'John Scott',
    'Daniel Nadasi',
  ];

  String _name = 'No one';

  final _formKey = new GlobalKey<FormState>();

  _buildMaterialSearchPage(BuildContext context) {
    return new MaterialPageRoute<String>(
      settings: new RouteSettings(
        name: 'material_search',
        isInitialRoute: false,
      ),
      builder: (BuildContext context) {
        return new Material(
          child: new MaterialSearch<String>(
            placeholder: 'Search',
            results: _names.map((String v) => new MaterialSearchResult<String>(
              icon: Icons.person,
              value: v,
              text: "Mr(s). $v",
            )).toList(),
            filter: (dynamic value, String criteria) {
              return value.toLowerCase().trim()
                .contains(new RegExp(r'' + criteria.toLowerCase().trim() + ''));
            },
            onSelect: (dynamic value) => Navigator.of(context).pop(value),
            onSubmit: (String value) => Navigator.of(context).pop(value),
          ),
        );
      }
    );
  }

  _showMaterialSearch(BuildContext context) {
    Navigator.of(context)
      .push(_buildMaterialSearchPage(context))
      .then((dynamic value) {
        setState(() => _name = value as String);
      });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
        actions: <Widget>[
          new IconButton(
            onPressed: () {
              _showMaterialSearch(context);
            },
            tooltip: 'Search',
            icon: new Icon(Icons.search),
          )
        ],
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 50.0),
              child: new Text("You found: ${_name ?? 'No one'}"),
            ),
            new Padding(
              padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
              child: new Form(
                key: _formKey,
                child: new Column(
                  children: <Widget>[
                    new MaterialSearchInput<String>(
                      placeholder: 'Name',
                      results: _names.map((String v) => new MaterialSearchResult<String>(
                        icon: Icons.person,
                        value: v,
                        text: "Mr(s). $v",
                      )).toList(),
                      filter: (dynamic value, String criteria) {
                        return value.toLowerCase().trim()
                          .contains(new RegExp(r'' + criteria.toLowerCase().trim() + ''));
                      },
                      onSelect: (dynamic v) {
                        print(v);
                      },
                      validator: (dynamic value) => value == null ? 'Required field' : null,
                      formatter: (dynamic v) => 'Hello, $v',
                    ),
                    new MaterialButton(
                      child: new Text('Validate'),
                      onPressed: () {
                        _formKey.currentState.validate();
                      }
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          _showMaterialSearch(context);
        },
        tooltip: 'Search',
        child: new Icon(Icons.search),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  material_search: ^0.2.8

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:material_search/material_search.dart';
  
Version Uploaded Documentation Archive
0.2.8 Sep 3, 2018 Go to the documentation of material_search 0.2.8 Download material_search 0.2.8 archive
0.2.7 May 24, 2018 Go to the documentation of material_search 0.2.7 Download material_search 0.2.7 archive
0.2.6 May 17, 2018 Go to the documentation of material_search 0.2.6 Download material_search 0.2.6 archive
0.2.5 May 11, 2018 Go to the documentation of material_search 0.2.5 Download material_search 0.2.5 archive
0.2.4 Apr 29, 2018 Go to the documentation of material_search 0.2.4 Download material_search 0.2.4 archive
0.2.3 Apr 16, 2018 Go to the documentation of material_search 0.2.3 Download material_search 0.2.3 archive
0.2.2 Apr 16, 2018 Go to the documentation of material_search 0.2.2 Download material_search 0.2.2 archive
0.2.1 Feb 19, 2018 Go to the documentation of material_search 0.2.1 Download material_search 0.2.1 archive
0.1.0 Jan 22, 2018 Go to the documentation of material_search 0.1.0 Download material_search 0.1.0 archive
0.0.2 Jan 18, 2018 Go to the documentation of material_search 0.0.2 Download material_search 0.0.2 archive

All 11 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
94
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
97
Learn more about scoring.

We analyzed this package on Oct 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.4
  • Flutter: 0.9.5

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/material_search.dart.

Run flutter format to format lib/material_search.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
meta ^1.1.1 1.1.6
mockito ^3.0.0 3.0.0
Transitive dependencies
analyzer 0.33.0
args 1.5.0
async 2.0.8
boolean_selector 1.0.4
charcode 1.1.2
collection 1.14.11
convert 2.0.2
crypto 2.0.6
csslib 0.14.6
front_end 0.1.6
glob 1.1.7
html 0.13.3+3
http 0.12.0
http_multi_server 2.0.5
http_parser 3.1.3
io 0.3.3
js 0.6.1+1
json_rpc_2 2.0.9
kernel 0.3.6
logging 0.11.3+2
matcher 0.12.3+1 0.12.4
mime 0.9.6+2
multi_server_socket 1.0.2
node_preamble 1.4.4
package_config 1.0.5
package_resolver 1.0.6
path 1.6.2
plugin 0.2.0+3
pool 1.3.6
pub_semver 1.4.2
shelf 0.7.3+3
shelf_packages_handler 1.0.4
shelf_static 0.2.8
shelf_web_socket 0.2.2+4
sky_engine 0.0.99
source_map_stack_trace 1.1.5
source_maps 0.10.8
source_span 1.4.1
stack_trace 1.9.3
stream_channel 1.6.8
string_scanner 1.0.4
term_glyph 1.0.1
test 1.3.4
typed_data 1.1.6
utf 0.9.0+5
vector_math 2.0.8
vm_service_client 0.2.6
watcher 0.9.7+10
web_socket_channel 1.0.9
yaml 2.1.15
Dev dependencies
flutter_test