Why does my variable not update in a class using Flutter Provider and ChangeNotifierProxyProvider?

Question

Why does my variable 'number' in class1 is not changing when I call the addNumber(){...} method in my code? The print statement "print(class2.numberFromClass1)" returns only the value which I stored directly in class1 and not the new value which is calculated by the addNumber(){} method. I am using the Provider Package. I think a reason could be, how I constructed the ChangeNotifierProxyProvider, but I tried many different approaches and it is still not working. This is the Part with the print statements and the two classes:

onPressed: () {
                class1.addNumber(5);
                class2.addNumberFromClass1();
                print(class1.number);
                print(class2.numberFromClass1); //this returns either null, or the int which I directly write to number in Class1. e.g int number = 3; it prints 3.
              },


class Class1 extends ChangeNotifier {
  int number; //This stays always the same.

  void addNumber(value) {
    number = number +
        value; //after adding value to number, the new calculated number should be stored in number.
    notifyListeners();
  }

  get getNumber {
    return number;
  }
}

class Class2 extends ChangeNotifier {
  int numberFromClass1;

  void addNumberFromClass1() {
    numberFromClass1 = Class1().getNumber;  //Here I want to get 'number' from class1
    print(numberFromClass1);
    notifyListeners();
  }

  get getNumberFromClass1 {
    return numberFromClass1;
  }
}

And that is the whole code:

import 'package:demo_app/home_page.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Class1>(
          create: (_) => Class1(),
        ),
        ChangeNotifierProxyProvider<Class1, Class2>(
          create: (BuildContext context) => Class2(),
          update: (BuildContext context, class1, class2) => (Class2()),
        ),
      ],
      child: MaterialApp(initialRoute: HomePage.id, routes: {
        HomePage.id: (context) => HomePage(),
      }),
    );
  }
}

class HomePage extends StatelessWidget {
  static const String id = 'home_page';

  @override
  Widget build(BuildContext context) {
    return Consumer2<Class1, Class2>(
      builder: (context, class1, class2, child) {
        return Scaffold(
          backgroundColor: Colors.blueAccent,
          body: Container(
            alignment: Alignment.center,
            color: Colors.blueAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(class1.number.toString()),
                SizedBox(height: 50),
                MaterialButton(
                  color: Colors.deepOrangeAccent,
                  height: 100,
                  minWidth: 100,
                  child: Text(
                    '5',
                    style: TextStyle(fontSize: 40),
                  ),
                  onPressed: () {
                    class1.addNumber(5);
                    class2.addNumberFromClass1();
                    print(class1.number);
                    print(class2
                        .numberFromClass1); //this returns either null, or the int which I directly write to number in Class1. e.g int number = 3; it prints 3.
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class Class1 extends ChangeNotifier {
  int number; //This stays always the same.

  void addNumber(value) {
    number = number +
        value; //after adding value to number, the new calculated number should be stored in number.
    notifyListeners();
  }

  get getNumber {
    return number;
  }
}

class Class2 extends ChangeNotifier {
  int numberFromClass1;

  void addNumberFromClass1() {
    numberFromClass1 = Class1().getNumber;
    print(numberFromClass1);
    notifyListeners();
  }

  get getNumberFromClass1 {
    return numberFromClass1;
  }
}

chunhunghan · Answer 1 · 2021-01-20T08:57:21.537

You can copy paste run full code below
Step 1: Use ChangeNotifierProxyProvider to inject class1

    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Class1>(
          create: (_) => Class1(),
        ),
        ChangeNotifierProxyProvider<Class1, Class2>(
          create: (BuildContext context) =>
              Class2(Provider.of<Class1>(context, listen: false)),
          update: (BuildContext context, class1, class2) =>
              class2..update(class1),
        ),
      ],

Step 2: init number = 0;

class Class1 extends ChangeNotifier {
  int number = 0;

Step 3: Class2 constructor need Class1 class1 and use class1.getNumber

class Class2 extends ChangeNotifier {
  Class1 class1;

  int numberFromClass1;

  Class2(this.class1);

  void update(Class1 value) {       
    class1 = value;
  }

  void addNumberFromClass1() {
    numberFromClass1 = class1.getNumber;

working demo

output of working demo

I/flutter ( 6716): numberFromClass1 5
I/flutter ( 6716): class1.number 5
I/flutter ( 6716): class2.numberFromClass1 5
I/flutter ( 6716): numberFromClass1 10
I/flutter ( 6716): class1.number 10
I/flutter ( 6716): class2.numberFromClass1 10
I/flutter ( 6716): numberFromClass1 15
I/flutter ( 6716): class1.number 15
I/flutter ( 6716): class2.numberFromClass1 15

full code

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Class1>(
          create: (_) => Class1(),
        ),
        ChangeNotifierProxyProvider<Class1, Class2>(
          create: (BuildContext context) =>
              Class2(Provider.of<Class1>(context, listen: false)),
          update: (BuildContext context, class1, class2) =>
              class2..update(class1),
        ),
      ],
      child: MaterialApp(initialRoute: HomePage.id, routes: {
        HomePage.id: (context) => HomePage(),
      }),
    );
  }
}

class HomePage extends StatelessWidget {
  static const String id = 'home_page';

  @override
  Widget build(BuildContext context) {
    return Consumer2<Class1, Class2>(
      builder: (context, class1, class2, child) {
        return Scaffold(
          backgroundColor: Colors.blueAccent,
          body: Container(
            alignment: Alignment.center,
            color: Colors.blueAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(class1.number.toString()),
                SizedBox(height: 50),
                MaterialButton(
                  color: Colors.deepOrangeAccent,
                  height: 100,
                  minWidth: 100,
                  child: Text(
                    '5',
                    style: TextStyle(fontSize: 40),
                  ),
                  onPressed: () {
                    class1.addNumber(5);
                    class2.addNumberFromClass1();
                    print("class1.number ${class1.number}");
                    print(
                        "class2.numberFromClass1 ${class2.numberFromClass1}"); //this returns either null, or the int which I directly write to number in Class1. e.g int number = 3; it prints 3.
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class Class1 extends ChangeNotifier {
  int number = 0; //This stays always the same.

  void addNumber(value) {
    number = number +
        value; //after adding value to number, the new calculated number should be stored in number.
    notifyListeners();
  }

  get getNumber {
    return number;
  }
}

class Class2 extends ChangeNotifier {
  Class1 class1;

  int numberFromClass1;

  Class2(this.class1);

  void update(Class1 value) {       
    class1 = value;
  }

  void addNumberFromClass1() {
    numberFromClass1 = class1.getNumber;
    print("numberFromClass1 ${numberFromClass1}");
    notifyListeners();
  }

  get getNumberFromClass1 {
    return numberFromClass1;
  }
}

Why does my variable not update in a class using Flutter Provider and ChangeNotifierProxyProvider?

1 Answers1