Search input widget

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

@HansMuller

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

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.

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.

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.

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.

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

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?

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.

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

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

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

Any update on this ?

Is the widget finally out?!

@DaveShuckerow

@DaveShuckerow

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

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

Default locales test for flutter tester. Roll engine 162b2e9..7be0217 (…

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.

Navigation Menu

Repository navigation

Search input widget #6691

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Search input widget #6691

Description

Activity

eseidelGoogle commented on Nov 3, 2016

eseidelGoogle commented on Nov 3, 2016

vy0592 commented on Nov 3, 2016

mehmetf commented on Nov 3, 2016

Hixie commented on Nov 3, 2016

HansMuller commented on Nov 3, 2016

vy0592 commented on Nov 4, 2016

Hixie commented on Nov 4, 2016

15 remaining items

dragonfax commented on Nov 15, 2017

hundeva commented on Jan 9, 2018

ianldgs commented on Jan 18, 2018

armehta commented on Jan 30, 2018

NotConquerer commented on Mar 24, 2018

MaskyS commented on Apr 28, 2018

HansMuller commented on Apr 30, 2018

goderbauer commented on Jun 8, 2018

github-actions commented on Aug 17, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions