Search code examples
flutterdartdropdown

flutter drop-down list - retrieve selected value and not in a box format

I have made a drop-down list as in the following screen enter image description here

Here:

  1. I want the drop-down to be in a box like other TextFormFields and arrow to be bigger
  2. my drop-down list background seems to be blurred and not visible
  3. I want the selected value to be replaced on "Choose the id proof" Following is my code:
Container(
  padding: EdgeInsets.symmetric(horizontal: 20),
  color: Colors.white,
  child: _hintDown(),
),
SizedBox(height: 10),

my dropdown code is:

DropdownButton _hintDown() => DropdownButton<String>(
  items: [
    DropdownMenuItem<String>(
      value: "1",
      child: Text(
        "Aadhar Card",
      ),
    ),
    DropdownMenuItem<String>(
      value: "2",
      child: Text(
        "Pancard",
      ),
    ),
  ],
  onChanged: (value) {
    print("value: $value");
  },
  hint: Text(
    "Choose the id proof!",
    style: TextStyle(
      color: Colors.black,
    ),
  ),
);

Is this code enough or do I need to go for some other?

Solution

  • There are certain changes in the code as per the requirements. You must visit the flutter documentation and read about using DropdownButton class to achieve what you want

    See the code clearly, and implement the code in your code base

      // look at the comments too to understand the functionality
  String dropdownValue = 'Choose the id proof!';
  
  // Return a widgt container to give the border
  // and then wrap it around your DropdownButton
  Widget _hintDown() => Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(8.0)
    ),
    child: Padding(
      padding: EdgeInsets.all(5.0),
      child: DropdownButton<String>(
        value: dropdownValue,
        icon: Icon(Icons.arrow_drop_down),
        iconSize: 30, //this inicrease the size
        elevation: 16,
        style: TextStyle(color: Colors.black),
        // this is for underline
        // to give an underline us this in your underline inspite of Container
  //       Container(
  //         height: 2,
  //         color: Colors.grey,
  //       )
        underline: Container(), 
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        },
        items: <String>['Choose the id proof!', 'Adhaar Card', 'Pancard', 'Voter card', 'Passport']
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      )
    )
  );

    Result

    Result GIF