Search input widget

[vy0592]

Is there a search box widget that follows the search pattern in material design?

[eseidelGoogle]

Presumably you mean https://material.google.com/patterns/search.html? Or is there a better reference? @HansMuller would know.

[eseidelGoogle]

I also know that https://github.com/flutter/flutter/tree/master/examples/stocks has search functionality. I don't recall if it conforms to that pattern or not however.

[vy0592]

Yes, I mean https://material.google.com/patterns/search.html.

I saw in the example they are using input widget and search icon to achieve this functionality. I also tried using input widget, but there's a problems:

I did not find a way to hide the line in input widget.
Is there anyway to hide the line from the input field so it would look better in the cases like putting it inside a bordered container, above a divider etc.

[mehmetf]

An widget that has the capability to hide its line would be sufficient.

We actually have scenarios where a magnifying glass icon is not desirable (such as when search is within the appbar). So a complete "search widget" might be an overkill.

[Hixie]

If using RawInput instead of Input is a sufficient solution to this problem, then we should add documentation to Input that points people to RawInput if they don't want the material look of an Input control.

[HansMuller]

Here's an example of using RawInput directly.

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => new _HomeState();
}

class _HomeState extends State<Home> {
  GlobalKey<RawInputState> _rawInputKey = new GlobalKey<RawInputState>();
  InputValue _value = new InputValue(text: 'Hello World');

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new Container(
        key: _rawInputKey,
        padding: const EdgeInsets.all(16.0),
        alignment: FractionalOffset.topLeft,

        // Some simple improvements are warranted:
        // - assert if style isn't specified
        // - cursorColor should default to the text style's color
        // - if key's value is a GlobalKey then use it as the default for focusKey

        child: new RawInput(
          focusKey: _rawInputKey,
          style: Theme.of(context).textTheme.display1,
          cursorColor: const Color(0xFF00FF00),
          value: _value,
          onChanged: (InputValue newValue) {
            setState(() {
              _value = newValue;
            });
          },
          onSubmitted: (InputValue newValue) {
            print("Submitted $newValue");
            Focus.clear(context);
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(home: new Home()));
}

[vy0592]

I was able to achieve it using the rawinput but this also requires me to include file 'text_selection.dart' in order to set selection control to materialTextSelectionControls.

I also had to use stack to draw the hint text and a flex to make sure input does not overflow. Full code below:

new Container(
  padding: const EdgeInsets.all(16.0),
  child: new Row(children: [
    new Icon(Icons.search, color: Colors.grey[600], size: 32.0),
    new Padding(padding: const EdgeInsets.only(left: 16.0)),
    new Flexible(child: new Stack(children: [
      new Positioned(
        left: 0.0,
        top: 0.0,
        child: new Text(config.placeHolderText, style: hintStyle)),
      ),
      new RawInput(
        key: _rawInputKey,
        focusKey: _rawInputKey,
        selectionControls: materialTextSelectionControls,
        cursorColor: const Color(0xFF00FF00),
        value: _value,
        onChanged: (InputValue newValue) {
          setState(() {
            _value = newValue;
          });
        },
      ),
   ])),
 ])
)

It looks too complex for a search box. Could you please take a look?

[Hixie]

The underlining of the word is part of IME. It's the word currently being typed that you can replace with autocomplete. That's not a bug.

[TitikshaDaga]

Is there a Search widget because i can't find anything about it except this link: https://material.io/guidelines/patterns/search.html#search-in-app-search ?

[mehmetf]

We have an internally developed auto-complete/search widget that will be pushed to external within a month's time frame. Stay tuned.

[mehmetf]

@DaveShuckerow FYI

[ericmand]

If this is available, I'd love a pointer. Otherwise, I'll wait patiently.

[eseidelGoogle]

I'm not sure of the status. The bug looks like its closed. Is there more work to do here @HansMuller?

[xster]

I think the original request isn't done yet as far as I can tell. We have a universal input field but I don't think we have an out of the box search bar with all the material UI treatment and auto-complete attachments.

[xster]

@mehmetf, was the internal version released publicly already?

[mehmetf]

Not yet. We are developing in the third_party branch however the mechanism to sync this to Github is not in place yet. I am assigning this to Dave who can provide more context.

[DaveShuckerow]

Hi all,

Work is going on internal to Google on this widget; I've been resolving the approvals that we need to get to roll code written inside Google out into GitHub.

Stay tuned.

[dragonfax]

Just happen to be looking for this, and glad to see theres been an update recently.

[hundeva]

Any news? I could make use of something like this.

[ianldgs]

Just created a plugin that might help: https://pub.dartlang.org/packages/material_search

[armehta]

Any update on this ?

[BasedMusa]

Is the widget finally out?!

[MaskyS]

@DaveShuckerow

[HansMuller]

My apologies for letting this issue grow stale for SO long. Support for a search bar, per the Material Design spec, is among the goals for Flutter development this summer: #17119

[goderbauer]

Material's Expandable Search is now available in Flutter as of #17629.
For Material's Persistent Search follow #17119.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.