I cannot show hint text in DropdownButtonFormField using Getx in flutter

Question

I want to show a hint text in DropdownButtonFormField. However, when I add a hint text into InputDecoration, it doesn't get displayed since Getx enforces an initial value. Is there any way I can show a hint text instead of the initial value using Getx? I need this because if the user doesn’t select any city from the list I want to display a warning to them instead of accepting the default city as their choice. Thanks in advance.

My controller class:

   class DropdownMenuController extends GetxController {

      final selectedCity = "Berlin".obs;
      final List<String> cityList = [
       'Berlin',
       'Paris',
       'Rome',
      ];

    void setSelectedCity(String value) {
      selectedCity.value = value;
    }
  }

View class:

DropdownMenuController controller = DropdownMenuController();

class InfoDropdown extends StatelessWidget {
  const InfoDropdown({
Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.fromLTRB(10, 2, 10, 2),
          child: Text(
            'City',
            style: TextStyle(
              color: Colors.indigo,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(10, 2, 10, 20),
          child: SizedBox(
            height: 50,
            child: Obx(() => DropdownButtonFormField(
                  decoration: kDropdownMenuDecoration //There is a hint text here I can't display,
                  onChanged: (newValue) {
                    controller.setSelectedCity(newValue as String);
                  },
                  value: controller.selectedCity.value,
                  items: controller.cityList.map((selectedItem) {
                     return DropdownMenuItem(
                      value: selectedItem,
                      child: Text(
                        selectedItem,
                      ),
                    );
                  }).toList(),
                )),
          ),
        ),
      ],
    );
  }
}

//kDropdownMenuDecoration:
InputDecoration(
  contentPadding: EdgeInsets.fromLTRB(10, 2, 10, 2),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(
      Radius.zero,
    ),
  ),
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.all(
      Radius.zero,
    ),
    borderSide: BorderSide(color: Colors.grey),
  ),
);

Please share the code kDropdownMenuDecoration – Jabeed Ahmed Aug 28 '22 at 09:30 — Jabeed Ahmed, Aug 28 '22 at 09:30
I added it to the end of the code. – Alp Karky Aug 28 '22 at 13:01 — Alp Karky, Aug 28 '22 at 13:01

Jabeed Ahmed · Answer 1 · 2022-09-11T08:58:30.887

0

Use hint: Text("Select the Value") inside DropdownButtonFormField widget.

Make sure to update this final selectedCity = "Berlin".obs; to late String selectedCity;

edited Sep 11 '22 at 08:58

answered Aug 29 '22 at 10:42

Jabeed Ahmed

125
1
4
13

If I don't initialize selectedCity like you suggest, it throws an error which says 'LateInitializationError: Field 'selectedCity' has not been initialized. ' – Alp Karky Sep 10 '22 at 08:40
@AlpKarky Please do check updated answer – Jabeed Ahmed Sep 11 '22 at 08:59
Thanks for the answer but I tried it already with 'late'. Otherwise, it won't even let me run the code. Getx enforces initializing the value. That is the main problem. Also if I write `late String selectedCity;` then `selectedCity` is no more observable. – Alp Karky Sep 11 '22 at 13:27
@AlpKarky Possible to share the project on github? – Jabeed Ahmed Sep 11 '22 at 13:31
The project is not on github currently but I will notify when it is. – Alp Karky Sep 11 '22 at 13:34
@AlpKarky once you notify me, i will check and fix – Jabeed Ahmed Sep 11 '22 at 13:35

I cannot show hint text in DropdownButtonFormField using Getx in flutter

1 Answers1