раскрывающийся список flutter - получить выбранное значение, а не в формате коробки

Question

Я создал раскрывающийся список, как на следующем экране введите описание изображения здесь

Здесь:

1. Я хочу, чтобы раскрывающийся список быть в поле, как другие поля TextFormFields, и стрелка должна быть больше
2. фон моего раскрывающегося списка кажется размытым и невидимым
3. Я хочу, чтобы выбранное значение было заменено на «Выберите идентификатор proof "Вот мой код:

Container(
  padding: EdgeInsets.symmetric(horizontal: 20),
  color: Colors.white,
  child: _hintDown(),
),
SizedBox(height: 10),

мой раскрывающийся код:

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,
    ),
  ),
);

Достаточно ли этого кода или мне нужно go для другого?

Answer 1

В коде есть определенные изменения согласно требованиям. Вы должны посетить документацию по флаттеру и прочитать об использовании класса DropdownButton для достижения желаемого

Четко увидеть код и реализовать его в своей базе кода

  // 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(),
      )
    )
  );

Результат

Результат гифка