Как динамически вкладывать виджеты во flutter dart? ⇐ Android

[Anonymous]

Я хочу создать вложенные виджеты так, чтобы изначально была одна группа с одной подгруппой
затем при нажатии кнопки «Добавить подгруппу» добавлялись подгруппы
также мне следует это сделать можно удалить нажатую кнопку удаления подгруппы.
Также у меня есть кнопка «Добавить группу», которая добавит группы.
Я добавил следующий код, но он добавляет подгруппу ко всем подгруппам группы
Любая помощь будет высоко оценена
для большей ясности прилагаются скриншоты

Код: Выделить всё

ListView.builder(
shrinkWrap: true,
itemCount: _groupCount,
itemBuilder: (BuildContext context, int index) {
var removeWidget = Container(
height: 100,
width: 50,
);
if (index > 0) {
removeWidget = Container(
height: 100,
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
),
onPressed: () {
debugPrint("Remove Group clicked");
setState(() {
if(_groupCount>1)
--_groupCount;
});
},
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
],
),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
height:40,
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
child:
Text("Item #" + (index+1).toString() + "  Add"),
),
],
),
),
],
),

Container(
height:  100,
child: Column(
children: [
Row(
children: [
SizedBox(
height: 100,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Padding(
padding: EdgeInsets.all(5.0),
child: TextField(
decoration: InputDecoration(
labelText: 'formfield1',
hintText: 'formfield1',
),
),
),
],
),
),
SizedBox(
height: 100,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
),
onPressed: () {
debugPrint("Add sub group clicked");
///add sub group
setState(() {
_subGroupCount++;
});
},
child: Text("Add sub-Group"),
),
),
],
),
),
removeWidget
],
)
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: ListView.builder(
itemCount: _subGroupCount,//_groupItemCount,
// physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return
Container(
height:  100,
child: Column(
children: [
Row(
children: [
SizedBox(
height: 100,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
EdgeInsets.fromLTRB(20.0, 8.0, 0.0, 8.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Sub group field1',
hintText: 'Sub group field1',
),
),
),
],
),
),
SizedBox(
height: 100,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: OutlinedButton(
style:  OutlinedButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
),
onPressed: () {
if(_subGroupCount>1) {
debugPrint("Remove sub-group clicked");
///remove  sub-group
setState(() {
_subGroupCount--;
});
}
else
{
debugPrint("Add Items clicked");
///add items
setState(() {
_subGroupCount++;
});
}
},
child: Icon( (_subGroupCount>1) ? Icons.delete : Icons.edit ),
),
),
],
),
),
],
)
],
),
);
}),
),
],
);
}),

Скриншот №1

Скриншот #2

Скриншот #3


Я пробовал использовать построитель списков
Я точно не знаю, как построить логику
Есть ли какой-нибудь способ использовать карты в dart?

Подробнее здесь: https://stackoverflow.com/questions/744 ... utter-dart