Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a Flutter application with a state management provider. Come on, follow the tutorial below.

Provider is a flutter package or library that is quite well-known and easy to use. Provider is very suitable for those of you who are just learning state management in Flutter. A little information, one of the benefits of state management is to increase application performance. State management is more efficient than stateful, because state management only changes the state of certain widgets and not all of them.

On this occasion we will learn how to use state management in counter applications. The counter application is the first application created when you create a Flutter project. We will modify it to use state management. Scroll to the bottom of this article to see the final results.

Creating State Management Flutter with Provider

1. Create a new flutter project with a free name. Use the latest version of flutter or flutter that supports null safety.

2. Open pubspec.yaml then add provider: then save the file to download the package. Follow the picture as below.

Add package

3. Create a counter_controller.dart file in the lib folder. We use this file as a data controller for the numbers.

import 'package:flutter/foundation.dart';

  class CounterController with ChangeNotifier{
  
    int count = 0;
  
    void increment(){
  
      count++;
      notifyListeners();
      
    }
  
  }

Explanation of the script above

1. Import Package: In this section, we import the flutter/foundation.dart package which contains the ChangeNotifier class. This package is required to use state management with providers.
2. CounterController Class: CounterController is a class that implements state management using providers. This class uses the ChangeNotifier mixin, which allows the class to send notifications to widgets that use the state about state changes.
3. The increment() method is responsible for increasing the count value and then calling notifyListeners(). This method will be called when we want to increase the counter value. In this section, the count will be incremented by 1, and then notifyListeners() will be called to notify the widgets that use this state that a change has occurred in the state. This will trigger an update to the display of the widget that uses that state.

4. Open the lib/main.dart file then change the script in it with the script below.

  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import 'counter_controller.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ChangeNotifierProvider(
        create: (context) => CounterController(),
        child: MaterialApp(
          title: 'Counter App',
          home: CounterScreen(),
        ),
      );
    }
  }
  
  class CounterScreen extends StatelessWidget {
    const CounterScreen({super.key});
  
    @override
    Widget build(BuildContext context) {
      final counterController = Provider.of<CounterController>(context);
  
      return Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Count:',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                '${counterController.count}',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counterController.increment();
          },
          child: Icon(Icons.add),
        ),
      );
    }
  }
  

Explanation of the script above

1. By using ChangeNotifierProvider, we can easily access and manage the state in various widgets under it.
2. Final function counterController = Provider.of<CounterController>(context); used to access the instance of CounterController provided by ChangeNotifierProvider inside the Flutter widget.

5. Ok, now we can do a test run. Please run your emulator. If successful, the display will look like the image below.

Easy, right? Because we already use state management, we don't need to use stateful anymore. You can improvise by creating a more complex flutter application with the provider.

Ok, that's it for the tutorial on making state management flutter with providers. Hopefully this short tutorial is useful. If you have any questions, please ask directly in the comments column below. That's all and receive a salary.