ChangeNotifier without Provider? Lets Try

Example we have a class that belong to ChangeNotifier, like this.

class AppNotifier with ChangeNotifier{
  String text = "Kolak";

  setText(){
    this.text = "Berubah";
    notifyListeners();
  }

  getText(){
    return this.text;
  }
}

That's is very simple class that implement the ChangeNotifier, with that now AppNotifier become to be a informant.

If we use Provider package we will must to create a provider as a wrapper to parent for all the widget that have data change's.

class MyApp extends StatelessWidget {

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Suhu Converter',
      home: ChangeNotifierProvider(
        create: (ctx) => AppNotifier(),
        child: Scaffold(
          appBar: AppBar(
            title: Text("App Ku"),
          ),
          body: Consumer<AppNotifier>(
            builder: (ctx, data, _){
              return Text(data.getText());
            },
          ),
          floatingActionButton: Consumer<AppNotifier>(
            builder: (ctx, data, _){
              return FloatingActionButton(
                child: Text("Ubah"),
                onPressed: (){
                  data.setText();
                },
              );
            },
          )
        ),
      )
    );
  }
}

We can see at the above code the ChangeNotifierProvider() method wrapped all widget that will be consume data from ChangeNotifier class thats is AppNotifier.

Every widget that will be consume data to AppNotifier class must be wrapped to Consumer class. At the end we can get the flow like this.

Thats is very simple flow to explanate the concept of ChangeNotifier with Provider works together.

ChangeNotifier without Provider

So what happen when we create a ChangeNotifier without we consume and trigger the data change without provider package?

Yes we must use a StatefulWidget 😉 Let's Try....

First we need to convert our widget to stateful and create a state class for that.

class MyApp extends StatefulWidget{
  State<MyApp> createState() => MyAppState(); 
}

class MyAppState extends State<MyApp> {

  Widget build(BuildContext context) {
   .....
  }
}

Next we must register AppNotifier into our state...

class MyAppState extends State<MyApp> {

  var notifier = AppNotifier();

  void initState(){
    notifier.addListener((){
      print("Run");
      setState(() {
      });
    });
    super.initState();
  }

  Widget build(BuildContext context) {
    ...
  }
}

Lastly we can use the method from AppNotifier easily without must to wrapper of any class again.

  var notifier = AppNotifier();

  .....

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("App Main"),
        ),
        body: Text(notifier.getText()),
        floatingActionButton: FloatingActionButton(
          child: Text("Ubah"),
          onPressed: (){
            notifier.setText();
          },
        ),
      )
    );
  }
}

And done it's simple right??