ChangeNotifier without Provider? Lets Try
Tags: flutter
Published: 2023-02-27 01:13:12

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

```dart
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.

```dart
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpnhwdc1esyakmud287x.png)

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.

```dart
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...

```dart
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.

```dart

  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??