以编程方式在Flutter上按下添加按钮时如何显示相同的小部件

Question

我有一个容器；假设将其称为Container Client，它是包含状态和产品的表单。我还有一个添加按钮，单击添加按钮（应该可以添加10次），它应该复制容器Client和一个删除按钮以删除容器。

我已经成功创建了客户端容器；当我按下添加按钮时，我能够显示一个客户端容器，而按下删除按钮时，则能够删除。但是只有一次。我想做10次。

bool visibilityObs = false;
void _changed(bool visibility,   String field) {
    setState(() {
      if (field == "client"){
        visibilityObs = visibility;
      }
    });
  }

final clientAdd = Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.02),
child: Form(
//                  autovalidate: true,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
  margin: new EdgeInsets.only(left: 16.0, right: 16.0),
  child: new Column(
    children: <Widget>[
      visibilityObs ? new Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          new Expanded(
            flex: 11,
            child: new Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                          padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.02),
                          color: Colors.yellow[700],
                          child: Text("Client "+ (runningNumber.toString()), style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), textAlign: TextAlign.left,) ,
                        )
                      ),
                    ],
                  ),

                  Container(
                    padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.02),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Text("State", style: TextStyle(color: Colors.grey[600], fontSize: 16),),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Expanded(
                                    child: DropdownButton(
                                      items: MainCSIPage.countryNationalityList.length > 0 ? MainCSIPage.countryNationalityList.map((item){
                                        return DropdownMenuItem(child: Text(item['country'], style: TextStyle(color: Colors.black, fontSize: 18),), value: item['value'],);
                                      }).toList() : [''].map((String value) {
                                        return DropdownMenuItem(value: value, child: Text(value),);
                                      }).toList(),
                                      value: MainCSIPage.countryNationalityList.length > 0 ? MainCSIPage.client.cob : null,
                                      onChanged: (selected) { storeClientData({"cob":selected}); },
                                      isExpanded: true,
                                      ),
                                    ),
                                  ],
                                ),
                              ]
                            )
                          ),
                          SizedBox(height: 15,),
                          Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: <Widget>[
                                Row(
                                  children: <Widget>[
                                    Text("Product", style: TextStyle(color: Colors.grey[600], fontSize: 16),),
                                  ],
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Expanded(
                                      child:DropdownButton(
                                        items:  MainCSIPage.campaignList.length > 0 ? MainCSIPage.campaignList.map((item){
                                          return DropdownMenuItem(child: Text(item['title'], style: TextStyle(color: Colors.black, fontSize: 18),), value: item['value'],);
                                        }).toList() : [''].map((String value) {
                                          return DropdownMenuItem(value: value, child: Text(value),);
                                        }).toList(),
                                        value: MainCSIPage.campaignList.length > 0 ? MainCSIPage.client.campaign : null,
                                        onChanged: (selected) { storeClientData({"campaign": selected, "productLob": null, "productSelection": null}); setState(() {MainCSIPage.campaignSelected = selected;});_fetchListFromDB(DatabaseHelper.jsonListProductLob); },
                                        isExpanded: true,
                                        ),
                                      ),
                                    ],
                                  ),
                                ]
                              )
                            ),
                        ],
                      ),
                    )
                  ]
                )
          ),
          new Expanded(
            flex: 1,child: new IconButton(
              color: Colors.grey[400],
              icon: const Icon(Icons.delete, size: 22.0,),
              onPressed: () {
                _changed(false, "client", runningNumber-1);
              },
            ),
          ),
        ],
      ) : new Container(),
    ],
  )
),

final addButton = Container(
  decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[BoxShadow(color: Colors.black, offset: Offset(1.0, 1.0), blurRadius: 3.0,),],),
  child: Form(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new InkWell(
              onTap: () {
                visibilityObs ? null : _changed(true, "client", runningNumber);
              },
              child: new Container(
                margin: new EdgeInsets.only(top: 16.0),
                child: new Column(
                  children: <Widget>[
                    new Icon(Icons.add_circle, color: Colors.grey[600], ),
                    new Container(
                      margin: const EdgeInsets.only(top: 8.0),
                    ),
                  ],
                ),
              )
            ),
            new SizedBox(width: 24.0),

          ],
        ) 
        ]
        )
    )
);

我目前只能复制（十次）并以编程方式删除容器。而且，根据添加的容器，我也无法将运行编号显示为1、2、3。有人可以帮我吗。我对Flutter还是很陌生。