Add the same Widget on click -Flutter - flutter

Question

I'm facing difficulties to make it. When I click the button, I would like it to appear at the bottom with a delete option. The option with multi_select_chip does not work well with SDK version 2.12, Can anyone tell me how to do it?
Is adding buttons a good idea, and what would it look like to create a new widget that will be combined with data from the button that I just clicked?
I am new to flutter, and any help will be really useful.
class Demo extends StatefulWidget {
#override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
List<Widget> widgets = <Widget>[];
#override
Widget build(BuildContext context) {
return Center(
child: Column(
children: widgets,
),
);
}
Widget show() {
return Center(
child: Column(
children: widgets,
),
);
}
#override
void initState() {
widgets = <Widget>[
// Text(
// "This is a sample text",
// style: TextStyle(fontSize: 40),
// ),
Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0,
// line interval
runSpacing: 8.0,
children: <Widget>[
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 70, height: 35),
child: ElevatedButton(
child: Text(
'Lion',
style: TextStyle(fontSize: 13),
),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 8.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 125, height: 35),
child: ElevatedButton(
child: Text(
'Flamingo',
style: TextStyle(fontSize: 13),
),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 8.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 105, height: 35),
child: ElevatedButton(
child: Text(
'Hippo',
style: TextStyle(fontSize: 13),
),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
// ]),
// const SizedBox(width: 80.0),
// Row(children: <Widget>[
// const SizedBox(width: 40.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 100, height: 35),
child: ElevatedButton(
child:
Text("Horse", style: TextStyle(fontSize: 13)),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 8.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 135, height: 35),
child: ElevatedButton(
child: Text("Tiger",
style: TextStyle(fontSize: 13)),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 4.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 70, height: 35),
child: ElevatedButton(
child: Text("INNE", style: TextStyle(fontSize: 13)),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
]),
]),
),
];
}
// Widget show() {
// return SampleContainer();
// }
}
class SampleContainer extends StatefulWidget {
#override
_SampleContainerState createState() => _SampleContainerState();
}.
class _SampleContainerState extends State<SampleContainer> {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0,
// line interval
runSpacing: 8.0,
children: <Widget>[
const SizedBox(width: 40.0),
ElevatedButton(
child: Text("INNE"),
onPressed: () {
setState(() {});
},
)
]),
] ),);
}
}

Answer 1

Here is the example.
import 'package:flutter/material.dart';
class WidgetPicker extends StatefulWidget {
const WidgetPicker({Key key}) : super(key: key);
#override
_WidgetPickerState createState() => _WidgetPickerState();
}
class _WidgetPickerState extends State<WidgetPicker> {
List<String> values = [
'Hello',
'Hello2',
'Hello3',
];
List<String> pickedValues = [];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildValues(),
const SizedBox(
height: 30,
),
_buildPickeds(),
],
),
);
}
Widget _buildValues() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: values
.map(
(value) => GestureDetector(
onTap: () {
if (pickedValues.contains(value)) {
pickedValues.remove(value);
} else {
pickedValues.add(value);
}
setState(() {});
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
color: Colors.blueGrey,
child: Text(
value,
),
),
),
)
.toList(),
);
}
Widget _buildPickeds() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: pickedValues
.map(
(value) => GestureDetector(
onTap: () {
if (pickedValues.contains(value)) {
pickedValues.remove(value);
} else {
pickedValues.add(value);
}
setState(() {});
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
color: Colors.red,
child: Text(
value,
),
),
),
)
.toList(),
);
}
}