flutterflutter-form-builder

Display the label on top of the FormBuilderDropdown with border


I have a FormBuilderDropdown with borders like the below image. But when there is a value in the dropdown, I cannot see the label like in the textbox above the dropdown. I want to show the dropdown with the label with the borders. How it is possible?

enter image description here

Here is the code

FormBuilderDropdown(
    name: widget.name,
    initialValue: "USA",
    decoration: InputDecoration(
      labelText: widget.label,
      labelStyle: TextStyle(
          color: widget.enabled
              ? Colors.black54
              : Theme.of(context).disabledColor),
      contentPadding: EdgeInsets.all(16),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Theme.of(context).primaryColor),
      ),
      border: new OutlineInputBorder(borderSide: new BorderSide()),
    ),
    allowClear: widget.allowClear,
    hint: Text(widget.hint),
    validator: widget.validator,
    enabled: widget.enabled,
    items: countries
        .map((country) => DropdownMenuItem(
              value: country['alpha_2_code'],
              child: Text(country['en_short_name']),
            ))
        .toList(),
  )

Solution

  • In my case, FormBuilderDropdown label is working here. Do flutter clean and restart the app, it may solve your issue, else check value on items.

    output

    Test widget

    
    class _DistrictslayoutState extends State<Districtslayout> {
      final districts = List.generate(22, (index) => "item $index");
    
      @override
      Widget build(BuildContext context) {
        return LayoutBuilder(
            builder: (context, constraints) => Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                      FormBuilderDropdown(
                          name: "name",
                          initialValue: districts[0],
                          decoration: InputDecoration(
                            labelText: "label Text",
                            labelStyle: TextStyle(
                                color: true
                                    ? Colors.black54
                                    : Theme.of(context).disabledColor),
                            contentPadding: EdgeInsets.all(16),
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Theme.of(context).primaryColor),
                            ),
                            border: new OutlineInputBorder(
                                borderSide: new BorderSide()),
                          ),
                          items: districts
                              .map(
                                (e) => DropdownMenuItem(
                                  value: e,
                                  child: Text(e),
                                ),
                              )
                              .toList()),
                    ])));
      }
    }