material_search 0.2.3

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

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

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.3] - 16/04/2018

  • Fix validation, add examples and test

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

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

1. Depend on it

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


dependencies:
  material_search: "^0.2.3"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support 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.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 failed 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
0.0.1 Jan 18, 2018 Go to the documentation of material_search 0.0.1 Download material_search 0.0.1 archive

Analysis

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

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6
  • Flutter: 0.3.2

Scores

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

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run flutter format to format lib/material_search.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.8.0 <2.0.0
flutter 0.0.0
meta ^1.1.1 1.1.2
mockito ^2.2.2 2.2.3 3.0.0-alpha+4
Transitive dependencies
analyzer 0.31.1 0.31.2-alpha.1
args 1.4.2
async 2.0.6
barback 0.15.2+15
boolean_selector 1.0.3
charcode 1.1.1
cli_util 0.1.2+1
collection 1.14.6 1.14.9
convert 2.0.1
crypto 2.0.2+1
csslib 0.14.1
front_end 0.1.0-alpha.9 0.1.0-alpha.11
glob 1.1.5
html 0.13.3
http 0.11.3+16
http_multi_server 2.0.4
http_parser 3.1.1
io 0.3.2+1
isolate 1.1.0 2.0.0
js 0.6.1
kernel 0.3.0-alpha.9 0.3.0-alpha.11
logging 0.11.3+1
matcher 0.12.2
mime 0.9.6
multi_server_socket 1.0.1
node_preamble 1.4.0
package_config 1.0.3
package_resolver 1.0.2
path 1.5.1
plugin 0.2.0+2
pool 1.3.4
pub_semver 1.3.7
shelf 0.7.2
shelf_packages_handler 1.0.3
shelf_static 0.2.7
shelf_web_socket 0.2.2
sky_engine 0.0.99
source_map_stack_trace 1.1.4
source_maps 0.10.4
source_span 1.4.0
stack_trace 1.9.2
stream_channel 1.6.5
string_scanner 1.0.2
term_glyph 1.0.0
test 0.12.35
typed_data 1.1.5
utf 0.9.0+4
vector_math 2.0.6
watcher 0.9.7+7
web_socket_channel 1.0.7
yaml 2.1.13
Dev dependencies
flutter_test