Clear the list after submission Flutter Provider

Question

I'm having a could of TextFormField with a ListView.Builder & using Provider as statemanagement. Upon submission of the Form i was able to add it to the list but only the Text in the TextFormField is getting cleared but not the list.

Did try by using .clear() but then the whole data was not getting added.

Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              widget.title.isEmpty
                  ? Text(
                      'Add Recipe',
                      style: TextStyle(color: ColorConstants.kDarkColor, fontSize: 25.sp),
                    )
                  : Text(
                      'Edit Recipe',
                      style: TextStyle(color: ColorConstants.kDarkColor, fontSize: 25.sp),
                    ),
              TextFormField(
                decoration:
                    const InputDecoration(labelText: 'Title', hintText: 'Enter Title'),
                controller: titleController..text = widget.title,
              ),
              TextFormField(
                decoration: const InputDecoration(
                    labelText: 'Description', hintText: 'Enter Description'),
                controller: descriptionController..text = widget.description,
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Flexible(
                      child: TextFormField(
                    controller: stepController,
                    decoration:
                        const InputDecoration(labelText: 'Step', hintText: 'Add Steps'),
                  )),
                  TextButton(
                      onPressed: () {
                        context.read<NewDishController>().addStep(DishSteps(
                            'Step ${NewDishController().stepNumber}',
                            stepController.text));
                        stepController.clear();
                      },
                      child: const Text("ADD"))
                ],
              ),
              const RecipeSteps(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: const Text('CANCEL')),
                  TextButton(
                      onPressed: () async {
                        if (titleController.text.isNotEmpty) {
                          context.read<NewDishController>().addDish(DishModel(
                              titleController.text,
                              descriptionController.text,
                              NewDishController().stepsList));
                        } else {
                          ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(content: Text('Title is empty')));
                        }
                        Navigator.pop(context);
                      },
                      child: const Text('CONFIRM')),
                ],
              )
            ],
          )

And this is the ChangeNotifier

class NewDishController extends ChangeNotifier {

  late String _title;
  String get title => _title;

  late String _description;
  String get description => _description;

  int _stepNumber = 1;
  int get stepNumber => _stepNumber;

  List<DishSteps> _stepsList = [];
  UnmodifiableListView<DishSteps> get stepsList => UnmodifiableListView(_stepsList);
  List<DishModel> _dishesList = [];
  UnmodifiableListView<DishModel> get dishesList => UnmodifiableListView(_dishesList);

  addStep(DishSteps step) {
    _stepsList.add(step);
    notifyListeners();
  }

  addDish(DishModel dish) {
    _dishesList.add(dish);
    notifyListeners();
  }

  stepIncrement() {
    _stepNumber++;
    notifyListeners();
  }

  stepDecrement() {
    _stepNumber--;
    notifyListeners();
  }

}

This is the ListView

class RecipeSteps extends StatelessWidget {
  const RecipeSteps({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    NewDishController dishController = Provider.of<NewDishController>(context);

    return ListView.builder(
        shrinkWrap: true,
        itemCount: dishController.stepsList.length,
        itemBuilder: (BuildContext context, int index) => Card(
          elevation: 8,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Consumer<NewDishController>(builder: (_, listener, __) => RichText(
              text: TextSpan(
                text: listener.stepsList[index].step+". ",
                style: DefaultTextStyle.of(context).style,
                children: <TextSpan>[
                  TextSpan(text: listener.stepsList[index].description, style: const TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            )),
          ),
        ));
  }
}

Answer 1

Wrap the whole ListView with Consumer<NewDishController> not just an item and use the length of that to build a list.