Now Reading: Provider vs GetX in Flutter – code example of Counter App

Loading

Provider vs GetX in Flutter – code example of Counter App

Flutter Provider and GetX are both state management solutions for Flutter apps. They both provide a way to manage and update state in your app in a more efficient and organized way, but they have some differences in their approach and functionality.

Flutter Provider is a built-in state management solution in Flutter, whereas GetX is a third-party package that provides a more complete set of tools for state management, including dependency injection, routing, and more.

Here are some key differences between Flutter Provider and GetX:

Flutter Provider:

  • Built-in state management solution in Flutter
  • Lightweight and easy to use
  • Based on the InheritedWidget class
  • Provides a way to share data between widgets without passing it down the widget tree
  • Suitable for small to medium-sized apps with simple state management needs

GetX:

  • Third-party state management solution for Flutter
  • Provides a complete set of tools for state management, dependency injection, routing, and more
  • Uses a reactive programming model based on Rx (ReactiveX)
  • Provides state management, dependency injection, and routing in a single package
  • Has a lightweight syntax and high performance
  • Suitable for large and complex apps with advanced state management needs

Here is an example of how to use Flutter Provider for state management in a simple counter app:

// Define a model class for the data you want to share
class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
    notifyListeners();
  }
}

// Create a Provider that can be used to share the data
final counterProvider = ChangeNotifierProvider((_) => CounterModel());

// Use the Provider in a widget to access the shared data
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterModel = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Text('Counter: ${counterModel.counter}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterModel.incrementCounter();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

In this example, we define a CounterModel class that extends ChangeNotifier to manage the counter state. We then create a ChangeNotifierProvider that provides an instance of CounterModel to any widget that requests it. We can then use Provider.of<CounterModel>(context) to access the CounterModel in our CounterScreen widget.

When the floating action button is pressed, we call counterModel.incrementCounter() to update the counter value in the CounterModel, which also calls notifyListeners() to inform any widgets that are listening to the CounterModel that the state has changed and needs to be updated.

Note that this is just a basic example, and there are many different ways to use Flutter Provider for state management depending on your specific needs.

Now lets see how to make a counter app using Getx

Here are some code examples of using GetX for state management:





// Define a controller to manage the state
class CounterController extends GetxController {
  var counter = 0.obs;

  void incrementCounter() {
    counter++;
  }
}

// Use the controller in a widget to access the shared data
class MyWidget extends StatelessWidget {
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Text('Counter: ${controller.counter}');
  }
}

// Update the shared data using the controller
class MyButton extends StatelessWidget {
  final CounterController controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        controller.incrementCounter();
      },
      child: Text('Increment'),
    );
  }
}

Note that GetX provides a reactive programming model based on Rx (ReactiveX), which allows you to use observables to automatically update the UI when the data changes. This can provide a more efficient and organized way to manage state in your app.

0 People voted this article. 0 Upvotes - 0 Downvotes.
svg

What do you think?

Show comments / Leave a comment

54 Comments:

Leave a reply

svg
Quick Navigation
  • 01

    Provider vs GetX in Flutter – code example of Counter App