MobX is a popular state management library in Flutter that simplifies the implementation of reactive programming. It allows you to efficiently manage application state by automatically tracking and updating dependencies, which leads to cleaner and more maintainable code.
To use MobX in your Flutter project, you need to add the mobx
and flutter_mobx
packages to your pubspec.yaml
file:
dependencies:
flutter:
sdk: flutter
mobx: ^2.0.0
flutter_mobx: ^2.0.0
Once the packages are added, you can start leveraging the power of MobX. Let's create a simple example to demonstrate how MobX works.
Create a new file called counter_store.dart
and define a simple counter store using MobX:
// counter_store.dart
import 'package:mobx/mobx.dart';
part 'counter_store.g.dart'; // This is required for code generation
class CounterStore = _CounterStore with _$CounterStore;
abstract class _CounterStore with Store {
@_observable
int counter = 0;
@action
void increment() {
counter++;
}
@action
void decrement() {
counter--;
}
}
In the above code, we create a class called CounterStore
and annotate it with the @Store
decorator from MobX. The counter
variable is marked as an observable using the @observable
decorator, and the increment()
and decrement()
methods are marked as actions using the @action
decorator.
MobX utilizes code generation to create necessary boilerplate code. In order to generate the required code, run the following command in your project directory:
flutter packages pub run build_runner build
This command will generate a file named counter_store.g.dart
containing the necessary code for MobX to work. Make sure to import this file wherever you use the CounterStore
.
Now, let's use MobX in a Flutter widget to demonstrate how reactive programming simplifies state management. Create a new file called counter_screen.dart
and add the following code:
// counter_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter_store.dart';
class CounterScreen extends StatelessWidget {
final CounterStore counterStore = CounterStore();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MobX Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Observer(
builder: (_) {
return Text(
'Count: ${counterStore.counter}',
style: TextStyle(fontSize: 24),
);
},
),
SizedBox(height: 16),
RaisedButton(
child: Text('Increment'),
onPressed: () => counterStore.increment(),
),
RaisedButton(
child: Text('Decrement'),
onPressed: () => counterStore.decrement(),
),
],
),
),
);
}
}
In the above code, we create a CounterStore
instance and use the Observer
widget from flutter_mobx
to observe changes in the counterStore.counter
value. Whenever the counter
changes, the text widget inside the Observer
builder is automatically updated.
Finally, we wrap the Increment
and Decrement
buttons with RaisedButton
widgets, which call the respective actions when pressed.
MobX is a powerful state management library for Flutter, simplifying reactive programming by automatically tracking and updating dependencies. With its observables and actions, you can easily manage and update application state. By using the Observer
widget, UI components can efficiently react to state changes. MobX is a great choice for projects that require fine-grained reactivity and declarative state management.