How to add a container to a column on tap in Flutter

Question

I have a situation where I have a listview of containers, and I would like when I double tap each container another container pops up below with information. Currently what I am trying to do is wrap each container within a column and do something like: onDoubleTap() {showBox = true} , and in the column have code: children: [post(), showbox == true? infobox(): container()] children: [post(), showbox == true? infobox(): container()] but I am not sure of the correct implementation. Any help would be great!

Answer 1

you should maintain a list of containers:

class ContainerAdder extends StatefulWidget {
  const ContainerAdder({Key? key}) : super(key: key);

  @override
  _ContainerAdderState createState() => _ContainerAdderState();
}

class _ContainerAdderState extends State<ContainerAdder> {
  List<Widget> containers = <Widget>[];
  Random random = Random();
  List<Color> colors = [
    Colors.blue,
    Colors.green,
    Colors.red,
    Colors.orange,
    Colors.purple,
    Colors.pink,
    Colors.teal,
    Colors.yellow,
  ];

  addContainer() {
    setState(() {
      int r = random.nextInt(colors.length);
      containers.add(
        InkWell(
          onDoubleTap: () => addContainer(),
          child: Container(
            margin: const EdgeInsets.only(bottom: 1.0),
            height: 50.0,
            color: colors[r],
          ),
        ),
      );
    });
  }

  @override
  void initState() {
    super.initState();
    addContainer();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [...containers],
      ),
    );
  }
}

As you can notice, the method addContainer() adds a container which is wrapped in an InkWell to have the tap listener. The doubleTap calls the method addContainer().

I simply spread the containers list inside ListView widget.

In the addContainer() method, I wrap the codes inside setState() so as to refresh the tree. You can use any other state management architecture if you so wish.

For the first time, I call addContainer() inside initState(), in order to populate the list with the first element.