Counter App using Flutter with MobX

This article mainly focused on learning MobX — state management, in flutter using a simple counter app, with some additional condition.

Output of App

I learn basics of a counter app using Mobx in flutter using “Flutter: State Management with Mobx -by Paul Halliday” and add little more into that…

Add the following to pubspec.yaml

dependencies:
  mobx:
  flutter_mobx:
  ...
dev_dependencies:
  build_runner:
  mobx_codegen:

pubspec.yaml

create a counter_page.dart to display the counter and buttons(basically UI), put in package ui(just for simplicity).

import 'package:flutter/material.dart';

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
             title: Text('Flutter & MobX'),
             ),
      body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Counter', style: TextStyle(fontSize: 30)),
      Text('0', style: TextStyle(fontSize: 30)),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: FlatButton.icon(
              icon: Icon(Icons.add),
              label: Text('Add'),
              color: Colors.green,
              onPressed: counter.increment,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: FlatButton.icon(
              icon: Icon(Icons.remove),
              label: Text('Minus'),
              onPressed: counter.decrement,
              color: Colors.deepOrangeAccent,
            ),
          ),
        ],
      ),
      Text('message for overflow and underflow'),
      FlatButton.icon(
        icon: Icon(Icons.reply),
        label: Text('Reset'),
        color: Colors.red,
        onPressed: counter.reset,
      ),
    ],
  ),
 ),
);
}
}

modify main.dart as

import 'package:flutter/material.dart';
import 'package:fluttermobxcounter/ui/counter_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

create a package store > counter, and inside counter package create counter.dart file. where we are going to write logic. Logic and UI should be in the different files to make clean code.

folder structure

//counter.dart
import 'package:mobx/mobx.dart';

abstract class _Counter with Store {
  int limit = 5;
  @observable
  int count = 0;
 
//to identify counter state to provide appropriate message
 @observable
  int msgindicator = 0;
/*if we just want to compute something after action is performed we should use computed instead of observable */
  @computed
  String get msg => (msgindicator == 1)
      ? 'Sorry you reached upto $limit'
      : (msgindicator == 2) ? 'No negative value allowed' : '';

  @action
  void increment() {
    if (count < limit) {
      count++;
      msgindicator = 0;
    } else {
      msgindicator = 1;
    }
    print('increment $msgindicator');
  }

  @action
  void decrement() {
    if (count > 0) {
      count--;
      msgindicator = 0;
    } else {
      msgindicator = 2;
    }
  }

  @action
  void reset() {
    count = 0;
    msgindicator = 0;
  }
}

after this add these lines into your code before counter class and after import statement/s:

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

run command:

flutter packages pub run build_runner watch

to generate auto-generated code for MobX — counter.g.dart(it will contains all MobX code).

Run and Enjoy the code.