MobX structure in Flutter

MobX is a state management library developed for Flutter. State management is used to control the flow of data in your application and ensure that the UI is updated when data changes. MobX embraces reactive programming principles that simplify data flow and make the code more understandable.

MobX consists of three main components: state, actions, and observers. State represents the data within your application. Actions are functions that modify the state. Observers are components that watch the state and detect updates.

Step 1: Add MobX to Your Project First, go to your project’s pubspec.yaml file and add the mobx and flutter_mobx dependencies. Then, run the command flutter pub get in the terminal to update the packages.

Step 2: Define the State Class Create your state class and import the flutter_mobx package. Annotate your class with @observable and define the state variables. For example:

import 'package:mobx/mobx.dart';

part 'my_store.g.dart';

class MyStore = _MyStoreBase with _$MyStore;

abstract class _MyStoreBase with Store {
  @observable
  int counter = 0;
}

Step 3: Define the Action Class Create your action class and import the flutter_mobx package. Annotate your class with @action and add methods that update the state. For example:

import 'package:mobx/mobx.dart';

part 'my_store.g.dart';

class MyStore = _MyStoreBase with _$MyStore;

abstract class _MyStoreBase with Store {
  @observable
  int counter = 0;

  @action
  void increment() {
    counter++;
  }

  @action
  void decrement() {
    counter--;
  }
}

Step 4: Use Provider and Observer We will use the Provider and Observer components to manage the state. In your screen widget, wrap the state class with Provider and wrap the components that listen to the state with Observer. For example:

import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:provider/provider.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myStore = Provider.of<MyStore>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Observer(
              builder: (_) => Text('Counter: ${myStore.counter}'),
            ),
            SizedBox(height: 16),
            RaisedButton(
              child: Text('Increment'),
              onPressed: myStore.increment,
            ),
            RaisedButton(
              child: Text('Decrement'),
              onPressed: myStore.decrement,
            ),
          ],
        ),
      ),
    );
  }
}

Step 5: Test the MobX Code In your main application file, create the state provider and the main widget. Then, use the MyHomePage widget to run your application. Now, you can increment or decrement the counter value, and the state will be automatically updated.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MobX Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Provider<MyStore>(
        create: (_) => MyStore(),
        child: MyHomePage(),
      ),
    );
  }
}

That’s it! You can now manage state in your Flutter applications using the MobX structure. These are the basic steps for a simple counter application. You can apply the same principles in more complex applications. By harnessing the power of MobX, you can build a more organized and maintainable codebase.