Flutter 如何使用Flatter Web动态添加或删除listview中的下拉按钮？

我已经创建了一个页面，用户可以在其中单击标题编辑内容，并可以添加和删除文章附加到的设备

但我不知道如何动态编程下拉列表，当用户按下添加设备按钮时添加更多下拉列表

他们想让我添加的附加功能也在下拉列表中，当他们选择“无”时，也应该删除该下拉列表

我计划在我的数据库中使用mysql、xampp或sqlite，如果我完成了UI

import 'package:flutter/material.dart';
import 'package:surveyadminpanel/Contents/tabbar.dart';
import 'package:surveyadminpanel/widgets/button.dart';
import 'package:surveyadminpanel/widgets/simplewidgets.dart';
import 'homepage.dart';
import 'dart:ui';

class Item {
  Item(this.name);
  String name;
}

class editsurvey extends StatefulWidget {
  @override
  _editsurveyState createState() => _editsurveyState();
}

class _editsurveyState extends State<editsurvey>{

  int surveyquestionnum = 1;
  int surveyquestiontotal = 1;

  List<Item> selectedUser = [null, null];
  List<Item> selecteddata = [null, null];
  List<Item> users;


  int linkdevices = 1;
  String dropdownvalue= "SELECT FROM DROPDOWN";
  List data = [
    'Sample Data 1',
    'Sample Data 2',
    'Sample Data 3',
    'Sample Data 4',
    'Sample Data 5',
    'Sample Data 6',
  ];




  @override
  void initState() {
    super.initState();
    users = <Item>[
      Item('Sample device 1'),
      Item('Sample device 2'),
      Item('Sample device 3'),
      Item('Sample device 4'),
    ];
  }

  @override
  Widget _dropdownbutton (List<Item> userlist, int index){
    return Container(
      padding: EdgeInsets.all(1),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        border: Border.all(),
        borderRadius: BorderRadius.all(
            Radius.circular(15.0) //
        ),
      ),
      child: DropdownButton<Item>(
        underline: SizedBox(),
        isExpanded: true,
        icon: Icon(Icons.arrow_drop_down),
        hint:  Text("  $dropdownvalue"),
        value: selectedUser[index],
        onChanged: (Item Value) {
          setState(() {
            selectedUser[index] = Value;
          });
        },
        items: userlist.map((Item user) {
          return  DropdownMenuItem<Item>(
            value: user,
            child: Row(
              children: <Widget>[
                SizedBox(width: 10,),
                Text(
                  user.name,
                  style:  TextStyle(color: Colors.black),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
  Widget _text(texthere,bold,size,color){
    return Text(texthere,style: TextStyle(fontWeight: bold,fontSize: size,color: color),overflow: TextOverflow.ellipsis,maxLines: 1);
  }
  Widget _logo(){
    return InkWell(
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => admincontent()),
          );
        },
        child: Container(width: 500,height: 200,child: Image.asset("images/v2.jpg")));
  }

  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Padding(padding: EdgeInsets.only(left: 30),
            child: RichText(
              text: TextSpan(
                  text: 'Good Morning Welcome to Sample:',
                  style: TextStyle(
                      color: Colors.blueAccent, fontSize: 18),
                  children: <TextSpan>[
                    TextSpan(text: usernametitle,
                      style: TextStyle(
                          color: Colors.black, fontSize: 18),
                    )
                  ]
              ),
            )
        ),
        elevation: 1,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        leading: _logo(),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.notifications),
            color: Colors.blueAccent,
            tooltip: 'Show Notification',
            onPressed: () {
            },
          ),
          IconButton(
            color: Colors.lightGreen,
            icon: const Icon(Icons.account_circle),
            tooltip: 'Check your Profile',
            onPressed: () {
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 5),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  _text("EDIT SURVEY", FontWeight.bold, 20,Colors.blue),
                  roundedRectButton("BACK", signInGradients),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Container(
                      width: screenWidth/1.6,
                      height: screenHeight/1.6,
                      decoration: BoxDecoration(
                        color: Colors.orange[200],
                        borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            _text("SURVEY TITLE", FontWeight.bold, 17,Colors.white),
                            _text(data[0], FontWeight.bold, 19, Colors.black),
                            _text("DATE CREATED", FontWeight.bold, 17,Colors.white),
                            _text(data[1], null, 19, Colors.black),
                            _text("CURRENT STATUS", FontWeight.bold, 17,Colors.white),
                            _text(data[2], null, 19, Colors.black),
                            _text("LANGUAGE VERSION", FontWeight.bold, 17,Colors.white),
                            _text(data[3], null, 19, Colors.black),
                            _text("NUMBERS OF ASSESSORS", FontWeight.bold, 17,Colors.white),
                            _text(data[4], null, 19, Colors.black),
                            _text("TOTAL RENDERED SURVEYS", FontWeight.bold, 17,Colors.white),
                            _text(data[5], null, 19, Colors.black),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                InkWell(
                                  onTap: (){

                                  },
                                  child: Container(width: 100,height: 50,child: Text("EDIT SURVEY")),
                                ),
                                _text("LINKED DEVICES : $linkdevices", FontWeight.bold, 17,Colors.white),
                              ],
                            )
                          ],
                        ),
                      )
                  ),
                  Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.black,
                            width: 1.0,
                            style: BorderStyle.solid
                        )
                    ),
                    width: screenWidth/1.6,
                    height: screenHeight/1.6,
                    child: Column(
                      children: <Widget>[
                        _text("DEVICES PINNED", FontWeight.bold, 20,Colors.blue),
                        ListView.separated(
                            shrinkWrap: true,
                            itemCount: linkdevices,
                            itemBuilder: (context, index){
                              return Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: _dropdownbutton(users, index),
                              );
                            },
                            separatorBuilder: (context, index) => Container(height: 10),
                            ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            InkWell(
                              child: roundedRectButton("ADD DEVICE", signInGradients),
                              onTap: (){

                              },
                            ),
                            InkWell(
                              child: roundedRectButton("CLEAR ALL DEVICE", signInGradients),
                              onTap: (){

                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:surveyadminpanel/Contents/tabbar.dart”；
导入“package:surveyadminpanel/widgets/button.dart”；
导入“package:surveyadminpanel/widgets/simplewidgets.dart”；
导入“homepage.dart”；
导入“dart:ui”；
类项目{
项目（此名称）；
字符串名；
}
类editsurvey扩展了StatefulWidget{
@凌驾
_editsurveyState createState（）=>\u editsurveyState（）；
}
类_editsurveyState扩展状态{
int surveyquestionnum=1；
int surveyquestiontotal=1；
列表selectedUser=[null，null]；
列出所选数据=[null，null]；
列出用户名单；
int-linkdevices=1；
String dropdownvalue=“从下拉列表中选择”；
列表数据=[
“样本数据1”，
‘样本数据2’，
‘样本数据3’，
‘样本数据4’，
‘样本数据5’，
‘样本数据6’，
];
@凌驾
void initState（）{
super.initState（）；
用户=[
项目（“样品装置1”），
项目（“样品装置2”），
项目（“样品装置3”），
项目（“样品装置4”），
];
}
@凌驾
小部件_下拉按钮（列表用户列表，int索引）{
返回容器(
填充：边缘设置。全部（1），
宽度：MediaQuery.of（context）.size.width，
装饰：盒子装饰(
border:border.all（），
borderRadius:borderRadius.all(
圆形半径（15.0）//
),
),
孩子：下拉按钮(
下划线：SizedBox（），
是的，
图标：图标（图标。箭头下拉），
提示：文本（“$dropdownvalue”），
值：selectedUser[索引]，
一旦更改：（项目值）{
设置状态（）{
selectedUser[索引]=值；
});
},
条目：userlist.map（（条目用户）{
返回下拉菜单项(
值：用户，
孩子：排(
儿童：[
尺寸箱（宽度：10，），
正文(
user.name，
样式：TextStyle（颜色：Colors.black），
),
],
),
);
}).toList（），
),
);
}
小部件文本（文本、粗体、大小、颜色）{
返回文本（texthere，样式：TextStyle（fontWeight:粗体，fontSize:大小，颜色：颜色），溢出：TextOverflow.省略号，最大行数：1）；
}
Widget_logo（）{
回墨槽(
onTap:（）{
导航器。推(
上下文
MaterialPage路由（生成器：（上下文）=>admincontent（）），
);
},
子：容器（宽度：500，高度：200，子：Image.asset（“images/v2.jpg”））；
}
小部件构建（构建上下文）{
double screenHeight=MediaQuery.of（context）.size.height；
double screenWidth=MediaQuery.of（context）.size.width；
返回脚手架(
appBar:appBar(
标题：填充（填充：仅限边集（左：30），
孩子：RichText(
text:TextSpan(
文本：“早上好，欢迎使用示例：”，
样式：TextStyle(
颜色：Colors.blueAccent，字体大小：18），
儿童：[
TextSpan（text:usernamettitle，
样式：TextStyle(
颜色：颜色。黑色，字体大小：18），
)
]
),
)
),
立面图：1，
自动嵌入：false，
背景颜色：Colors.white，
前导：_logo（），
行动：[
图标按钮(
图标：常量图标（图标.通知），
颜色：Colors.blueAccent，
工具提示：“显示通知”，
已按下：（）{
},
),
图标按钮(
颜色：颜色。浅绿色，
图标：常量图标（图标、帐户和圆圈），
工具提示：“检查您的个人资料”，
已按下：（）{
},
),
],
),
主体：填充物(
填充：常数边集全部（16.0），
子：容器(
子：列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
尺寸箱（高度：5），
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
_文本（“编辑调查”，FontWeight.bold，20，颜色.蓝色），
圆形选择按钮（“后退”，表示半径），
],
),
划船(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
容器(
宽度：屏幕宽度/1.6，
高度：屏幕高度/1.6，
装饰：盒子装饰(
颜色：颜色。橙色[200]，
borderRadius:新的borderRadius.all（新半径.圆形（20.0）），
),
孩子：填充(
填充：常数边集全部（12.0），
子：列(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
_文本（“调查标题”，FontWeight.bold，17色，白色），
_文本（数据[0]，FontWeight.bold，19，彩色.黑色），
_
List<Item> selectedUser = [null];
...
InkWell(
          child: Text("ADD DEVICE"),
          onTap: () {
            selectedUser.add(null);
            linkdevices ++;
            setState(() {

            });

import 'package:flutter/material.dart';

class Item {
  Item(this.name);
  String name;
}

class editsurvey extends StatefulWidget {
  @override
  _editsurveyState createState() => _editsurveyState();
}

class _editsurveyState extends State<editsurvey> {
  int surveyquestionnum = 1;
  int surveyquestiontotal = 1;

  List<Item> selectedUser = [null];
  List<Item> selecteddata = [null, null];
  List<Item> users;

  int linkdevices = 1;
  String dropdownvalue = "SELECT FROM DROPDOWN";
  List data = [
    'Sample Data 1',
    'Sample Data 2',
    'Sample Data 3',
    'Sample Data 4',
    'Sample Data 5',
    'Sample Data 6',
  ];

  @override
  void initState() {
    super.initState();
    users = <Item>[
      Item('Sample device 1'),
      Item('Sample device 2'),
      Item('Sample device 3'),
      Item('Sample device 4'),
    ];

  }

  @override
  Widget _dropdownbutton(List<Item> userlist, int index) {
    return Container(
      padding: EdgeInsets.all(1),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        border: Border.all(),
        borderRadius: BorderRadius.all(Radius.circular(15.0) //
            ),
      ),
      child: DropdownButton<Item>(
        underline: SizedBox(),
        isExpanded: true,
        icon: Icon(Icons.arrow_drop_down),
        hint: Text("  $dropdownvalue"),
        value: selectedUser[index],
        onChanged: (Item Value) {
          print(Value.toString());
          print(index);
          setState(() {
            selectedUser[index] = Value;
          });
        },
        items: userlist.map((Item user) {
          return DropdownMenuItem<Item>(
            value: user,
            child: Row(
              children: <Widget>[
                SizedBox(
                  width: 10,
                ),
                Text(
                  user.name,
                  style: TextStyle(color: Colors.black),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }

  Widget _text(texthere, bold, size, color) {
    return Text(texthere,
        style: TextStyle(fontWeight: bold, fontSize: size, color: color),
        overflow: TextOverflow.ellipsis,
        maxLines: 1);
  }

  Widget _logo() {
    return InkWell(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => admincontent()),
          );
        },
        child: Container(
            width: 500, height: 200, child: Image.asset("images/v2.jpg")));
  }

  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Padding(
            padding: EdgeInsets.only(left: 30),
            child: RichText(
              text: TextSpan(
                  text: 'Good Morning Welcome to Sample:',
                  style: TextStyle(color: Colors.blueAccent, fontSize: 18),
                  children: <TextSpan>[
                    TextSpan(
                      text: "usernametitle",
                      style: TextStyle(color: Colors.black, fontSize: 18),
                    )
                  ]),
            )),
        elevation: 1,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        leading: _logo(),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.notifications),
            color: Colors.blueAccent,
            tooltip: 'Show Notification',
            onPressed: () {},
          ),
          IconButton(
            color: Colors.lightGreen,
            icon: const Icon(Icons.account_circle),
            tooltip: 'Check your Profile',
            onPressed: () {},
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 5),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  _text("EDIT SURVEY", FontWeight.bold, 20.0, Colors.blue),
                  //roundedRectButton("BACK", signInGradients),
                  Text("BACK"),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Container(
                      width: screenWidth / 1.6,
                      height: screenHeight / 1.6,
                      decoration: BoxDecoration(
                        color: Colors.orange[200],
                        borderRadius:
                            new BorderRadius.all(new Radius.circular(20.0)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            _text("SURVEY TITLE", FontWeight.bold, 17.0,
                                Colors.white),
                            _text(data[0], FontWeight.bold, 19.0, Colors.black),
                            _text("DATE CREATED", FontWeight.bold, 17.0,
                                Colors.white),
                            _text(data[1], null, 19.0, Colors.black),
                            _text("CURRENT STATUS", FontWeight.bold, 17.0,
                                Colors.white),
                            _text(data[2], null, 19.0, Colors.black),
                            _text("LANGUAGE VERSION", FontWeight.bold, 17.0,
                                Colors.white),
                            _text(data[3], null, 19.0, Colors.black),
                            _text("NUMBERS OF ASSESSORS", FontWeight.bold, 17.0,
                                Colors.white),
                            _text(data[4], null, 19.0, Colors.black),
                            _text("TOTAL RENDERED SURVEYS", FontWeight.bold,
                                17.0, Colors.white),
                            _text(data[5], null, 19.0, Colors.black),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                InkWell(
                                  onTap: () {},
                                  child: Container(
                                      width: 100,
                                      height: 50,
                                      child: Text("EDIT SURVEY")),
                                ),
                                _text("LINKED DEVICES : $linkdevices",
                                    FontWeight.bold, 17.0, Colors.white),
                              ],
                            )
                          ],
                        ),
                      )),
                  Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.black,
                            width: 1.0,
                            style: BorderStyle.solid)),
                    width: screenWidth / 1.6,
                    height: screenHeight / 1.6,
                    child: Column(
                      children: <Widget>[
                        _text("DEVICES PINNED", FontWeight.bold, 20.0,
                            Colors.blue),
                        ListView.separated(
                          shrinkWrap: true,
                          itemCount: linkdevices,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: _dropdownbutton(users, index),
                            );
                          },
                          separatorBuilder: (context, index) => Container(height: 10),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            InkWell(
                              child: Text("ADD DEVICE"),
                              onTap: () {
                                selectedUser.add(null);
                                linkdevices ++;
                                setState(() {

                                });
                                /*listWidget.add(  ListView.separated(
                                  shrinkWrap: true,
                                  itemCount: linkdevices,
                                  itemBuilder: (context, index) {
                                    return Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: _dropdownbutton(users, index),
                                    );
                                  },
                                  separatorBuilder: (context, index) => Container(height: 10),
                                ));
                                setState(() {

                                });*/
                              },
                            ),
                            InkWell(
                              child: Text("CLEAR ALL DEVICE"),
                              onTap: () {},
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

class admincontent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: editsurvey(),
    );
  }
}