hint not working for DropdownButtonFormField in Flutter

Question

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?

Legato

Answer 1

The hint is Displayed if the value is null.

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

Myrmeco

Answer 2

You need to use InputDecoration for that purpose:

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

Laceration

Answer 3

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

Offhand