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.