New Example - Stateless MObX Counter App (#104)

Co-authored-by: A HEAD FULL OF DREAMS <workdeveloper@gmail.com>
Co-authored-by: Nishant Srivastava <nisrulz@users.noreply.github.com>

statless_counter_app/lib/counter.dart

@@ -0,0 +1,18 @@
+import 'package:mobx/mobx.dart';
+
+// Include generated file
+part 'counter.g.dart';
+
+// This is the class used by rest of your codebase
+class Counter = _Counter with _$Counter;
+
+// The store-class
+abstract class _Counter with Store {
+  @observable
+  int value = 0;
+
+  @action
+  void increment() {
+    value++;
+  }
+}

statless_counter_app/lib/counter.g.dart

@@ -0,0 +1,46 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'counter.dart';
+
+// **************************************************************************
+// StoreGenerator
+// **************************************************************************
+
+// ignore_for_file: non_constant_identifier_names, unnecessary_brace_in_string_interps, unnecessary_lambdas, prefer_expression_function_bodies, lines_longer_than_80_chars, avoid_as, avoid_annotating_with_dynamic
+
+mixin _$Counter on _Counter, Store {
+  final _$valueAtom = Atom(name: '_Counter.value');
+
+  @override
+  int get value {
+    _$valueAtom.reportRead();
+    return super.value;
+  }
+
+  @override
+  set value(int value) {
+    _$valueAtom.reportWrite(value, super.value, () {
+      super.value = value;
+    });
+  }
+
+  final _$_CounterActionController = ActionController(name: '_Counter');
+
+  @override
+  void increment() {
+    final _$actionInfo =
+        _$_CounterActionController.startAction(name: '_Counter.increment');
+    try {
+      return super.increment();
+    } finally {
+      _$_CounterActionController.endAction(_$actionInfo);
+    }
+  }
+
+  @override
+  String toString() {
+    return '''
+value: ${value}
+    ''';
+  }
+}

statless_counter_app/lib/main.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
+
+import 'counter.dart'; // Import the Counter
+
+final counter = Counter(); // Instantiate the store
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  // This widget is the root of your application.
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'MobX',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const MyHomePage(),
+    );
+  }
+}
+
+class MyHomePage extends StatelessWidget {
+  const MyHomePage();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('MobX Stateless Widget Counter'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Text(
+              'You have pushed the button this many times:',
+            ),
+            // Wrapping in the Observer will automatically re-render on changes to counter.value
+            Observer(
+              builder: (_) => Text(
+                '${counter.value}',
+                style: Theme.of(context).textTheme.headline4,
+              ),
+            ),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: counter.increment,
+        tooltip: 'Increment',
+        child: Icon(Icons.add),
+      ),
+    );
+  }
+}