在带有边框的 FormBuilderDropdown 顶部显示标签

Question

我有一个 FormBuilderDropdown，边框如下图所示。但是当下拉列表中有一个值时，我看不到下拉列表上方文本框中的标签。我想显示带有边框标签的下拉菜单。怎么可能？

这是代码

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

Answer 1

就我而言，FormBuilderDropdown 标签在这里起作用。执行 flutter clean 并重新启动应用程序，它可能会解决您的问题，否则请检查项目的价值。

测试插件


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

Answer 2

我正在使用 DropdownButtonFormField，效果很好。

DropdownButtonFormField(
                // value: 'item1',
                hint: Text('select item'),
                decoration: InputDecoration(labelText: 'select an item'),
                onChanged: (_) {},
                dropdownColor: Colors.white,
                items: [
                  DropdownMenuItem(
                    child: Text('item 1'),
                    value: 'item1',
                  ),
                  DropdownMenuItem(
                    child: Text('item 2'),
                    value: 'item2',
                  ),
                ],
              ),

在带有边框的 FormBuilderDropdown 顶部显示标签

Display the label on top of the FormBuilderDropdown with border

flutter

flutter-form-builder