Dropdown null selection & hints

[tvolkert]

Feature request from Customer Leafy:

• Add the ability to show a dropdown which does not have a selection (yet)
• Add "hint" text to display in the dropdown when no value is selected
• Add ability to show error-text for dropdowns, as we'd need to show that a "None" selection would not be valid when submitting a form

[mpcomplete]

The Input rework that @Hixie mentions in #6421 is a prerequisite for most of this.

[HansMuller]

Here's an example that demos the requested features.

import 'package:flutter/material.dart';

class InputContainerDemo extends StatefulWidget {
  @override
  _InputContainerDemoState createState() => new _InputContainerDemoState();
}

class _InputContainerDemoState extends State<InputContainerDemo> {
  static final List<String> _dropdownItems = <String>['One', 'Two', 'Free', 'Four'];
  String _dropdownValue = 'One';
  String _errorText;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('InputContainer Demo')),
      body: new Padding(
        padding: const EdgeInsets.all(32.0),
        child: new DropdownButtonHideUnderline(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new InputContainer(
                labelText: _dropdownValue == null ? 'Where are you from' : 'From',
                errorText: _errorText,
                isEmpty: _dropdownValue == null,
                child: new DropdownButton<String>(
                  value: _dropdownValue,
                  isDense: true,
                  onChanged: (String newValue) {
                    setState(() {
                      _dropdownValue = newValue;
                    });
                  },
                  items: _dropdownItems.map((String value) {
                    return new DropdownMenuItem<String>(
                      value: value,
                      child: new Text(value),
                    );
                  }).toList(),
                ),
              ),
              new SizedBox(height: 32.0),
              new Row(
                children: <Widget> [
                  new RaisedButton(
                    onPressed: () {
                      setState((){
                        _dropdownValue = null;
                      });
                    },
                    child: new Text('VALUE'),
                  ),
                  new SizedBox(width: 32.0),
                  new RaisedButton(
                    onPressed: () {
                      setState(() {
                        _errorText = _errorText != null ? null : 'error';
                      });
                    },
                    child: new Text('ERROR'),
                  ),
                ],
              ),
            ],
          ),
        ),
      )
    );
  }
}

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

[gauthamns]

InputContainer is now removed from the material library. Any input regarding the new way of doing will be helpful.

[Hixie]

I think we renamed it InputDecorator.

[jjerome00]

Using example above, replace the InputContainer Widget with this:

InputDecorator(
  decoration: InputDecoration(
    labelText: _dropdownValue == null ? 'Where are you from' : 'From',
    errorText: _errorText,
  ),
  isEmpty: _dropdownValue == null,
  child: new DropdownButton<String>(
    value: _dropdownValue,
    isDense: true,
    onChanged: (String newValue) {
      setState(() {
        _dropdownValue = newValue;
      });
    },
    items: _dropdownItems.map((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
  ),
),