Flutter: My screen doesn't update when I update my List in the provider trough functions

959 Views Asked by At

I have a List with functions in a Provider in my Main File. If I update this List trough the functions in my widget (by pressing the buttons), it seems to work but doesn´t change anything on the screen...

I have two Screens, which should be filed with the same List, so I need the Provider Functions. In my opinion (which of course don´t have to be right) I code the functions right, so the problem may be that the screens didn´t update, altaugh I used the Consumer. It would be great if you can show me the mistake in my Code.

I would be very happy if you could look at my problem - Thank you!

MainFile:

void main() => runApp(
  MultiProvider(
  providers: [

    ChangeNotifierProvider(create: (_) => MyList()),

  ],

  child: MyApp(),
),);


class MyList extends ChangeNotifier {

 final List<String> heute = [
    'Ereignis 1',
    'Ereignis 2',
    'Ereignis 3',
    'Ereignis 4',
    'Ereignis 5'
  ];

  UnmodifiableListView<String> get items => UnmodifiableListView(heute);

  int get totallength => heute.length;

  void addItem(String item) {
      heute.add(item);
      notifyListeners();
  }

  void deleteItem(int index) {
    heute.removeAt(index);
    notifyListeners();
  }

  void removeAll() {
    heute.clear();
    notifyListeners();
  }

}

Widget:

class ContainerListe extends StatefulWidget {
  @override
  _ContainerListeState createState() => _ContainerListeState();

}
class _ContainerListeState extends State<ContainerListe> {

final heute = MyList();

  void addItem(String item) {
    setState(() {
    heute.addItem(item);});
    Navigator.of(context).pop();
  }

  void removeAll(){setState(() {
    setState(() {
    heute.removeAll();});
  });}

  void deleteItem(int index) {
  setState(() {
  heute.deleteItem(index);
  });}


  void newEntry() {
  showDialog<AlertDialog>(
  context: context, 
  builder: (BuildContext context) 
  {return AddItemDialogWHW(addItem);});}


  @override
  Widget build(BuildContext context) {
    final heute = MyList();
    final elemente = heute.items;


      return Consumer<MyList>(
          builder: (context, mylist, child)
    {
      return
        Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                  width: 400.0,
                  height: 550.0,
                  child: Align(
                      alignment: Alignment.bottomCenter,
                      child:

                      ListView.builder(
                        itemCount: Provider
                            .of<MyList>(context, listen: true)
                            .totallength,
                        itemBuilder: (context, i) {
                          return
                            Column(
                              children: [

                                ContainerVorlage(
                                  elemente[i],
                                      () => deleteItem(i),
                                ),

                                SizedBox(
                                  height: 15,
                                ),


                              ],
                            )

                          ;
                        },
                      )

                  )),


              SizedBox(
                height: 40,
              ),


              AddButton(
                    () => newEntry(),
              ),


            ]);
    });

  }
}


//More Code

2

There are 2 best solutions below

0
On BEST ANSWER

First, remove this line from _ContainerListeState

final heute = MyList();

Then use the methods from the MyList object, as you can use

 return Consumer<MyList>(builder: (context, mylist, child)
 ... // rest  code
   ContainerVorlage(
     elemente[i],
     () => mylist.deleteItem(i),
  ),
0
On

You are creating new object under your build method and use it for add delete operations and it is not related to with the part where you get length.
In order to delete correctly use it like:

mylist.deleteItem(i)