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.
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:
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.
//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.