flutter - 如何将装饰（边框、提示文本、前缀图标、后缀图标）添加到新的自动完成小部件....？

Question

1. 您如何将边框、提示文本、前缀图标、后缀图标等装饰添加到新的自动完成小部件以及验证以检查它是否为空...？

我参考了颤振自动完成类文档，它没有太大帮助....

2. 此外，如果可能的话，希望具有类似于下图的芯片的多选选项.... 图片

有什么建议么？？

Answer 1

回答我的第一个问题...

InputDecorator(
           decoration: InputDecoration(
             prefixIcon: Icon(
                              Icons.info,
                              color: Colors.red,
                            ),
                            hintText: "Search..",
                          ),
                          child: Autocomplete(
                            optionsBuilder:
                                (TextEditingValue textEditingValue) {
                              if (textEditingValue.text == '') {
                                return const Iterable<String>.empty();
                              }
                              return _kOptions.where((String option) {
                                return option.contains(
                                    textEditingValue.text.toLowerCase());
                              });
                            },
                            //   onSelected: (User selection) {
                            //   //   print(
                            //   //       'You just selected ${_displayStringForOption(selection)}');
                            //   // },
                            // ),
                          ),
                        ),

Answer 2

InputDecorator(
            decoration: InputDecoration(
              contentPadding: EdgeInsets.symmetric(vertical: 0,horizontal: 4),
              border: OutlineInputBorder(gapPadding: 1),
              hintText: "Search..",
            ),
            child: Autocomplete<Vehicle>(
              displayStringForOption: (c) => c.vehicleno.toString(),
              optionsBuilder: (TextEditingValue textEditingValue) {
                return Provider.of<VehicleRegProvider>(context, listen: false)
                    .tempvehicle
                    .where((Vehicle continent) => continent.vehicleno!
                        .toLowerCase()
                        .startsWith(textEditingValue.text.toLowerCase()))
                    .toList();
              },
              onSelected: (Vehicle selection) {
                print('Selected: ${selection.vehicleno}');
              },
            ),
          )

注意：如果我们contentpadding从输入装饰器中删除属性，我们会得到像这样的扩展小部件

contentPadding: EdgeInsets.symmetric(vertical: 0,horizontal: 4)