How to remove any widget from a list and set its state in flutter

Issue

Here i am creating an app which contain a section through which a user can create a poll. So when i am pressing a add button options container get added but when i am trying to remove the option container by pressing the minus button it's not working. Can someone help me to fix this. This is my college project.

import 'package:flutter/material.dart';
import 'package:note_app_demo/scaffold.dart';

List<Container> options = [
  Container(
    padding: EdgeInsets.all(15),
    child: TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
        hintText: 'Option 1',
      ),
    ),
  ),
];

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

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

class _POLLState extends State<POLL> {
  int option_var = 1;
  @override
  Widget build(BuildContext context) {
    return SCAFFOLD(
      BODY: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(15),
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10)),
                  hintText: 'Write your question here',
                ),
              ),
            ),
            Column(
              children: options,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        options.removeAt(option_var);
                      });
                      option_var--;
                    },
                    child: Icon(
                      Icons.remove_circle,
                      size: 60,
                    ),
                  ),
                ),
                Container(
                  child: GestureDetector(
                    onTap: () {
                      option_var++;
                      if (option_var < 9) {
                        setState(() {
                          options.add(
                            Container(
                              padding: EdgeInsets.all(15),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(10)),
                                  hintText: 'Option $option_var',
                                ),
                              ),
                            ),
                          );
                        });
                      }
                    },
                    child: Icon(
                      Icons.add_circle,
                      size: 60,
                    ),
                  ),
                ),
              ],
            ),
            Container(
              child: GestureDetector(
                onTap: () {},
                child: Icon(
                  Icons.check_circle,
                  size: 60,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Solution

Every time you trigger the widget rebuild upon calling setState the option_var gets reset to 1. At the top of the build method, when setting the value of the option_var, use instead:

int option_var = options.length;

which will reflect the accurate number of items in the collection, thus keeping your count in sync.

Then, in your removal code, just do:

onPressed: () {
  setState(() {
     option_var--;
     options.removeAt(option_var);
  });         
},

Where you keep the option_var updated, and you always remove from the end of the array.

It should look like this after the updates:

Good luck in your project!

Answered By - Roman Jaquez