Question

I want my dropdown like this,my current dropdown 第一张图片是我想要实现的，第二张是我当前的下拉菜单。我在颤振中创建了一个动态下拉列表。如果他的选项不可用，我需要允许用户添加一个新选项。我不想完全改变代码。只希望下拉菜单的第一个选项是添加新按钮。

My Code.
 child: Row(
                                      children: [
                                        Container(
                                          width: 150,
                                          alignment: Alignment.centerLeft,
                                          child: RichText(
                                              text: TextSpan(
                                                  children: <TextSpan>[
                                                TextSpan(
                                                    text: 'Product Type'),
                                                TextSpan(
                                                  text: ' *',
                                                  style: TextStyle(
                                                      color: Colors.red),
                                                )
                                              ])),
                                        ),
                                        FutureBuilder<
                                                List<ProductTypeModel>>(
                                            future: getProductType(2),
                                            builder: (context, snapshot) {
                                              if (snapshot.hasData) {
                                                // print('snapshot.hasData');
                                                final productType =
                                                    snapshot.data;
                                                return Container(
                                                  width: 220,
                                                  decoration: BoxDecoration(
                                                    border: new Border.all(
                                                      width: 0.5,
                                                    ),
                                                    borderRadius:
                                                        new BorderRadius
                                                                .all(
                                                            new Radius
                                                                    .circular(
                                                                4.0)),
                                                  ),
                                                  child:
                                                      DropdownButtonHideUnderline(
                                                    child: DropdownButton<
                                                        dynamic>(
                                                      value: _ddTypeValue,
                                                      icon: const Icon(Icons
                                                          .arrow_drop_down),
                                                      iconSize: 24,
                                                      elevation: 16,
                                                      hint: Text(
                                                          'Select Type'),
                                                      onChanged: (dynamic
                                                          newValue) {
                                                        // print(newValue);
                                                        setState(() {
                                                          _ddTypeValue =
                                                              newValue;
                                                          // print(_ddTypeValue);
                                                        });
                                                      },
                                                      items: productType.map<
                                                              DropdownMenuItem>(
                                                          (ProductTypeModel
                                                              value) {
                                                        return new DropdownMenuItem<
                                                            dynamic>(
                                                          value: value
                                                              .productTypeId
                                                              .toString(),
                                                          child: Padding(
                                                            padding:
                                                                const EdgeInsets
                                                                        .all(
                                                                    8.0),
                                                            child: new Text(
                                                                value
                                                                    .productType),
                                                          ),
                                                        );
                                                      }).toList(),
                                                    ),
                                                  ),
                                                );
                                                // return DropdownButton(items: []);
                                              } else if (snapshot
                                                  .hasError) {
                                                return Text(snapshot.error
                                                    .toString());
                                              }
                                              return CircularProgressIndicator();
                                            }),
                                      ],
                                    ),[second image is of my current dropdown][2]

Answer 1

创建一个这样的函数：

List<DropdownMenuItem> getDynamicMenu() {
    List<DropdownMenuItem> dynamicMenus = [];
    dynamicMenus.add(DropdownMenuItem<dynamic>(
      value: 'Create new',
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Text('Create new'),
      ),
    ));
    
  
    List<DropdownMenuItem> dynamicProductsMenus = productType.map<DropdownMenuItem>((ProductTypeModel value) {
      return new DropdownMenuItem<dynamic>(
        value: value.productTypeId.toString(),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: new Text(value.productType),
        ),
      );
    }).toList();
    dynamicMenus.addAll(dynamicProductsMenus);
      
    return dynamicMenus;
  }

并在创建菜单时调用该函数，如下所示：

items : getDynamicMenu(),

带有静态“添加新”按钮类型的颤动动态下拉菜单，如图所示

1 个答案: