Dynamic Dropdown in flutter with a static "add new" button type as shown in Pic

Question

I want my dropdown like this,my current dropdown The first image is what I want to achieve and the second is my current dropdown. I have created a dynamic dropdown in flutter. I need to allow the user to add a new option if his option is not available. I don't want to completely change the code. Just want the first option of the dropdown to be an add new button.

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

Create a function like this:

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;
  }

And call the function while creating the menu like this:

items : getDynamicMenu(),