material_search 0.2.8

  • Readme
  • Changelog
  • Example
  • Installing
  • 67

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 pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub 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';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
90
Health:
Code health derived from static analysis. [more]
74
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
67
Learn more about scoring.

We analyzed this package on May 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Health issues and suggestions

Fix lib/material_search.dart. (-26.12 points)

Analysis of lib/material_search.dart failed with 1 error, 3 hints:

line 273 col 9: The named parameter 'isInitialRoute' isn't defined.

line 30 col 81: 'subhead' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is subtitle1. This feature was deprecated after v1.13.8..

line 186 col 46: 'title' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline6. This feature was deprecated after v1.13.8..

line 310 col 62: 'subhead' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is subtitle1. This feature was deprecated after v1.13.8..

Maintenance issues and suggestions

No valid SDK. (-20 points)

The analysis could not detect a valid SDK that can use this package.

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (mockito).

Package is getting outdated. (-72.05 points)

The package was last published 89 weeks ago.

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.8
mockito ^3.0.0 3.0.2 4.1.1
Transitive dependencies
_fe_analyzer_shared 3.0.0
analyzer 0.39.8
args 1.6.0
async 2.4.1
boolean_selector 2.0.0
charcode 1.1.3
collection 1.14.12
convert 2.1.1
coverage 0.13.9
crypto 2.1.5
csslib 0.16.1
glob 1.2.0
html 0.14.0+3
http 0.12.1
http_multi_server 2.2.0
http_parser 3.1.4
io 0.3.4
js 0.6.1+1
logging 0.11.4
matcher 0.12.6
mime 0.9.6+3
multi_server_socket 1.0.2
node_interop 1.1.1
node_io 1.1.1
node_preamble 1.4.9
package_config 1.9.3
path 1.7.0
pedantic 1.9.0
pool 1.4.0
pub_semver 1.4.4
shelf 0.7.5
shelf_packages_handler 2.0.0
shelf_static 0.2.8
shelf_web_socket 0.2.3
sky_engine 0.0.99
source_map_stack_trace 2.0.0
source_maps 0.10.9
source_span 1.7.0
stack_trace 1.9.3
stream_channel 2.0.0
string_scanner 1.0.5
term_glyph 1.1.0
test 1.14.5
test_api 0.2.16
test_core 0.3.5
typed_data 1.1.6
vector_math 2.0.8
vm_service 4.0.4
watcher 0.9.7+15
web_socket_channel 1.1.0
webkit_inspection_protocol 0.7.2
yaml 2.2.1
Dev dependencies
flutter_test