CODEWITHSUNDEEP
flutterdrop-down-menudartdropdown
MSARKrish
MSARKrish

Reputation: 4094

hint not working for DropdownButtonFormField in Flutter

I have a form in Flutter with textformfield and dropdownbuttonformfield. While running my app hint is not working for me. hint not shown in dropdownbuttonformfield. It's showing kkk as initial value not showing Select City.

I'm using StatefulWidget here.

help me to solve this Problem. Thanks in Advance.

class _AddTripState extends State<AddTrip> {
  var formKey = GlobalKey<FormState>();
  TextEditingController nameController = TextEditingController();  
  TextEditingController numberController = TextEditingController();
  TextEditingController datecontroller = TextEditingController();
  final format = DateFormat("yyyy-MM-dd");
  DateTime _dateTime;
  List<String> name = ['kkk', 'rrr'];
  String _dropdownvalue = 'kkk';

@override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text("Add Trip"),
  ),
  body: Form(
      key: formKey,
      child: ListView(
        children: <Widget>[
          Text(
            'Name',
            textAlign: TextAlign.left,
          ),
          TextFormField(
            decoration: _inputDecoration(),
            keyboardType: TextInputType.text,
            controller: nameController,
            validator: textValidator,
          ),
          Text(
            'Number',
            textAlign: TextAlign.left,
          ),
          TextFormField(
            decoration: _inputDecoration(),
            controller: numberController,
            keyboardType: TextInputType.number,
            validator: numberValidator,
          ),
          Text(
            'Date',
            textAlign: TextAlign.left,
          ),
          TextFormField(
            readOnly: true,
            controller: datecontroller,
            validator: dateValidator,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.amber)),
              errorStyle: TextStyle(color: Colors.amber),
              suffixIcon: GestureDetector(
                child: Icon(
                  Icons.date_range,
                ),
                onTap: () {
                  showDatePicker(
                          context: context,
                          initialDate: DateTime.now(),
                          firstDate: DateTime(2018),
                          lastDate: DateTime(2020))
                      .then((value) {
                    setState(() {
                      datecontroller.text =
                          DateFormat("yyyy-MM-dd").format(value);
                    });
                  });
                },
              ),
            ),
          ),
          DropdownButtonFormField<String>(
            hint: Text('Select City'),
            validator: _cityValidator,
            decoration: InputDecoration(border: OutlineInputBorder()),
            items: name.map((value) {
              return DropdownMenuItem<String>(
                  child: Text(value), value: value);
            }).toList(),
            value: _dropdownvalue,
            onChanged: (newValue) {
              setState(() {
                _dropdownvalue = newValue;
              });
            },
          ),
          RaisedButton(
            onPressed: submit,
            child: Text('Add Trip'),
          )
        ],
      )),
);
}

Where i'm wrong?

Upvotes: 12

Views: 9872

Answers (3)

Pintu Parikh
Pintu Parikh

Reputation: 21

Make dropdownValue nullable and set hint Text to show the default initial value.

DropdownButton<String>(
            value: dropdownValue,
            style: const TextStyle(color: Colors.black),
            underline: Container(
              height: 2,
              color: Colors.black,
            ),
            items: list.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: const Text(
              "Select Item",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.w600),
            ),
            onChanged: (String? value) {
              // This is called when the user selects an item.
              setState(() {
                dropdownValue = value!;
              });
            },
          )

Where List is

const List<String> list = <String>['One', 'Two', 'Three', 'Four'];

And define the dropdownValue nullable above build()

String? dropdownValue; // This is IMP

Upvotes: 0

hamid reza
hamid reza

Reputation: 478

You need to use InputDecoration for that purpose:

 decoration: InputDecoration(labelText:'Select City'),

Upvotes: 2

anmol.majhail
anmol.majhail

Reputation: 51206

The hint is Displayed if the value is null.

so in your code - make - String _dropdownvalue = 'kkk'; change to - String _dropdownvalue; only

Upvotes: 21

Related Questions