Refactoring `simplistic_calculator` (#1032)

Seperate configuraiton data from display.
Also, it now uses constructor tearoffs.

simplistic_calculator/lib/main.dart

@@ -12,9 +12,25 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:math_expressions/math_expressions.dart';
 import 'package:window_size/window_size.dart';
 
+const double windowWidth = 600;
+const double windowHeight = 900;
+
+void main() {
+  if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {
+    WidgetsFlutterBinding.ensureInitialized();
+    setWindowTitle('Simplistic Calculator');
+  }
+
+  runApp(
+    const ProviderScope(
+      child: CalculatorApp(),
+    ),
+  );
+}
+
 @immutable
-class Display {
+class CalculatorState {
-  const Display({
+  const CalculatorState({
     required this.buffer,
     required this.calcHistory,
     required this.mode,
@@ -26,13 +42,13 @@ class Display {
   final CalculatorEngineMode mode;
   final String error;
 
-  Display copyWith({
+  CalculatorState copyWith({
     String? buffer,
     List<String>? calcHistory,
     CalculatorEngineMode? mode,
     String? error,
   }) =>
-      Display(
+      CalculatorState(
         buffer: buffer ?? this.buffer,
         calcHistory: calcHistory ?? this.calcHistory,
         mode: mode ?? this.mode,
@@ -42,10 +58,10 @@ class Display {
 
 enum CalculatorEngineMode { input, result }
 
-class CalculatorEngine extends StateNotifier<Display> {
+class CalculatorEngine extends StateNotifier<CalculatorState> {
   CalculatorEngine()
       : super(
-          const Display(
+          const CalculatorState(
             buffer: '0',
             calcHistory: [],
             mode: CalculatorEngineMode.result,
@@ -100,17 +116,16 @@ class CalculatorEngine extends StateNotifier<Display> {
           mode: CalculatorEngineMode.result,
         );
       } else {
-        if (result.ceil() == result) {
+        final resultStr = result.ceil() == result
-          state = state.copyWith(
+            ? result.toInt().toString()
-            buffer: result.toInt().toString(),
+            : result.toString();
-            mode: CalculatorEngineMode.result,
-          );
-        } else {
         state = state.copyWith(
-            buffer: result.toString(),
+            buffer: resultStr,
             mode: CalculatorEngineMode.result,
-          );
+            calcHistory: [
-        }
+              '${state.buffer} = $resultStr',
+              ...state.calcHistory,
+            ]);
       }
     } catch (err) {
       state = state.copyWith(
@@ -122,392 +137,311 @@ class CalculatorEngine extends StateNotifier<Display> {
   }
 }
 
-final displayProvider =
+final calculatorStateProvider =
-    StateNotifierProvider<CalculatorEngine, Display>((_) => CalculatorEngine());
+    StateNotifierProvider<CalculatorEngine, CalculatorState>(
+        (_) => CalculatorEngine());
 
-void main() {
+class ButtonDefinition {
-  setupWindow();
+  const ButtonDefinition({
-  runApp(
+    required this.areaName,
-    const ProviderScope(
+    required this.label,
-      child: CalculatorApp(),
+    required this.op,
-    ),
+    this.type = CalcButtonType.outlined,
-  );
-}
-
-const double kWindowWidth = 600;
-const double kWindowHeight = 900;
-
-void setupWindow() {
-  if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {
-    WidgetsFlutterBinding.ensureInitialized();
-    setWindowTitle('Simplistic Calculator');
-    setWindowMinSize(const Size(kWindowWidth, kWindowHeight));
-    getCurrentScreen().then((screen) {
-      setWindowFrame(
-        const Rect.fromLTWH(
-          300,
-          300,
-          kWindowHeight,
-          kWindowWidth,
-        ),
-      );
   });
-  }
-}
 
-class CalculatorApp extends ConsumerWidget {
+  final String areaName;
-  const CalculatorApp({Key? key}) : super(key: key);
+  final String label;
-
+  final CalculatorEngineCallback op;
-  @override
+  final CalcButtonType type;
-  Widget build(BuildContext context, WidgetRef ref) {
+}
-    final Display display = ref.watch(displayProvider);
 
-    return MaterialApp(
+final buttonDefinitions = <ButtonDefinition>[
-      debugShowCheckedModeBanner: false,
+  ButtonDefinition(
-      home: Scaffold(
-        body: Container(
-          color: Colors.white,
-          child: SafeArea(
-            child: LayoutGrid(
-              areas: '''
-              display display display display
-              clear   bkspc   lparen  rparen
-              sqrt    pow     abs     sgn
-              ceil    floor   e       ln
-              sin     cos     tan     fact
-              arcsin  arccos  arctan  mod
-              seven   eight   nine    divide
-              four    five    six     multiply
-              one     two     three   minus
-              zero    point   equals  plus
-              ''',
-              columnSizes: [1.fr, 1.fr, 1.fr, 1.fr],
-              rowSizes: [
-                2.fr,
-                1.fr,
-                1.fr,
-                1.fr,
-                1.fr,
-                1.fr,
-                2.fr,
-                2.fr,
-                2.fr,
-                2.fr
-              ],
-              children: [
-                NamedAreaGridPlacement(
-                  areaName: 'display',
-                  child: SizedBox.expand(
-                    child: Padding(
-                      padding: const EdgeInsets.symmetric(
-                          horizontal: 8, vertical: 8),
-                      child: display.error.isEmpty
-                          ? AutoSizeText(
-                              display.buffer,
-                              textAlign: TextAlign.end,
-                              style: const TextStyle(
-                                fontSize: 80,
-                                color: Colors.black,
-                              ),
-                              maxLines: 2,
-                            )
-                          : AutoSizeText(
-                              display.error,
-                              textAlign: TextAlign.start,
-                              style: const TextStyle(
-                                fontSize: 80,
-                                color: Colors.red,
-                              ),
-                              maxLines: 2,
-                            ),
-                    ),
-                  ),
-                ),
-                NamedAreaGridPlacement(
     areaName: 'clear',
-                  child: CalcButton(
     op: (engine) => engine.clear(),
     label: 'AC',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'bkspc',
-                  child: CalcButton(
     op: (engine) => engine.backspace(),
     label: '⌫',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'lparen',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('('),
     label: '(',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'rparen',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer(')'),
     label: ')',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'sqrt',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('sqrt('),
     label: '√',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'pow',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('^'),
     label: '^',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'abs',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('abs('),
     label: 'Abs',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'sgn',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('sgn('),
     label: 'Sgn',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'ceil',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('ceil('),
     label: 'Ceil',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'floor',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('floor('),
     label: 'Floor',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'e',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('e('),
     label: 'e',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'ln',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('ln('),
     label: 'ln',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'sin',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('sin('),
     label: 'Sin',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'cos',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('cos('),
     label: 'Cos',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'tan',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('tan('),
     label: 'Tan',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'fact',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('!'),
     label: '!',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'arcsin',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('arcsin('),
     label: 'Arc Sin',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'arccos',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('arccos('),
     label: 'Arc Cos',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'arctan',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('arctan('),
     label: 'Arc Tan',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'mod',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('%'),
     label: 'Mod',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'seven',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('7'),
     label: '7',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'eight',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('8'),
     label: '8',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'nine',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('9'),
     label: '9',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'four',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('4'),
     label: '4',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'five',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('5'),
     label: '5',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'six',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('6'),
     label: '6',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'one',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('1'),
     label: '1',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'two',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('2'),
     label: '2',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'three',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('3'),
     label: '3',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'zero',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('0'),
     label: '0',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'point',
-                  child: CalcButton(
     op: (engine) => engine.addToBuffer('.'),
     label: '.',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'equals',
-                  child: const CalcEqualsButton(),
+    op: (engine) => engine.evaluate(),
+    label: '=',
+    type: CalcButtonType.elevated,
   ),
-                NamedAreaGridPlacement(
+  ButtonDefinition(
     areaName: 'plus',
-                  child: CalcButton(
+    op: (engine) => engine.addToBuffer('+', continueWithResult: true),
-                    op: (engine) => engine.addToBuffer(
-                      '+',
-                      continueWithResult: true,
-                    ),
     label: '+',
   ),
-                ),
+  ButtonDefinition(
-                NamedAreaGridPlacement(
     areaName: 'minus',
-                  child: CalcButton(
+    op: (engine) => engine.addToBuffer('-', continueWithResult: true),
-                    op: (engine) => engine.addToBuffer(
-                      '-',
-                      continueWithResult: true,
-                    ),
     label: '-',
   ),
+  ButtonDefinition(
+    areaName: 'multiply',
+    op: (engine) => engine.addToBuffer('*', continueWithResult: true),
+    label: '*',
   ),
+  ButtonDefinition(
+    areaName: 'divide',
+    op: (engine) => engine.addToBuffer('/', continueWithResult: true),
+    label: '/',
+  ),
+];
+
+class CalculatorApp extends ConsumerWidget {
+  const CalculatorApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(calculatorStateProvider);
+
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Scaffold(
+        body: Container(
+          color: Colors.white,
+          child: SafeArea(
+            child: LayoutGrid(
+              areas: '''
+              display display display display  history
+              clear   bkspc   lparen  rparen   history
+              sqrt    pow     abs     sgn      history
+              ceil    floor   e       ln       history
+              sin     cos     tan     fact     history
+              arcsin  arccos  arctan  mod      history
+              seven   eight   nine    divide   history
+              four    five    six     multiply history
+              one     two     three   minus    history
+              zero    point   equals  plus     history
+              ''',
+              columnSizes: [1.fr, 1.fr, 1.fr, 1.fr, 2.fr],
+              rowSizes: [
+                2.fr,
+                1.fr,
+                1.fr,
+                1.fr,
+                1.fr,
+                1.fr,
+                2.fr,
+                2.fr,
+                2.fr,
+                2.fr
+              ],
+              children: [
                 NamedAreaGridPlacement(
-                  areaName: 'multiply',
+                  areaName: 'display',
+                  child: SizedBox.expand(
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 8, vertical: 8),
+                      child: state.error.isEmpty
+                          ? AutoSizeText(
+                              state.buffer,
+                              textAlign: TextAlign.end,
+                              style: const TextStyle(
+                                fontSize: 80,
+                                color: Colors.black,
+                              ),
+                              maxLines: 2,
+                            )
+                          : AutoSizeText(
+                              state.error,
+                              textAlign: TextAlign.start,
+                              style: const TextStyle(
+                                fontSize: 80,
+                                color: Colors.red,
+                              ),
+                              maxLines: 2,
+                            ),
+                    ),
+                  ),
+                ),
+                ...buttonDefinitions.map(
+                  (definition) => NamedAreaGridPlacement(
+                    areaName: definition.areaName,
                     child: CalcButton(
-                    op: (engine) => engine.addToBuffer(
+                      label: definition.label,
-                      '*',
+                      op: definition.op,
-                      continueWithResult: true,
+                      type: definition.type,
                     ),
-                    label: '*',
                   ),
                 ),
                 NamedAreaGridPlacement(
-                  areaName: 'divide',
+                  areaName: 'history',
-                  child: CalcButton(
+                  child: Padding(
-                    op: (engine) => engine.addToBuffer(
+                    padding: const EdgeInsets.symmetric(horizontal: 8),
-                      '/',
+                    child: ListView(
-                      continueWithResult: true,
+                      children: [
+                        const ListTile(
+                          title: Text(
+                            'History',
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                            ),
                           ),
-                    label: '/',
                         ),
+                        ...state.calcHistory.map(
+                          (result) => ListTile(
+                            title: Text(result),
                           ),
+                        )
                       ],
                     ),
                   ),
                 ),
+              ],
             ),
-    );
-  }
-}
-
-class CalcEqualsButton extends ConsumerWidget {
-  const CalcEqualsButton({
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return SizedBox.expand(
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: ElevatedButton(
-          onPressed: () => ref.read(displayProvider.notifier).evaluate(),
-          child: const AutoSizeText(
-            '=',
-            style: TextStyle(fontSize: 40, color: Colors.white),
           ),
         ),
       ),
@@ -515,25 +449,32 @@ class CalcEqualsButton extends ConsumerWidget {
   }
 }
 
-typedef _CalculatorEngineCallback = void Function(CalculatorEngine engine);
+typedef CalculatorEngineCallback = void Function(CalculatorEngine engine);
+enum CalcButtonType { outlined, elevated }
 
 class CalcButton extends ConsumerWidget {
   const CalcButton({
     Key? key,
     required this.op,
     required this.label,
+    required this.type,
   }) : super(key: key);
 
-  final _CalculatorEngineCallback op;
+  final CalculatorEngineCallback op;
   final String label;
+  final CalcButtonType type;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final buttonConstructor = type == CalcButtonType.elevated
+        ? ElevatedButton.new
+        : OutlinedButton.new;
+
     return SizedBox.expand(
       child: Padding(
-        padding: const EdgeInsets.all(8.0),
+        padding: const EdgeInsets.all(8),
-        child: OutlinedButton(
+        child: buttonConstructor(
-          onPressed: () => op(ref.read(displayProvider.notifier)),
+          onPressed: () => op(ref.read(calculatorStateProvider.notifier)),
           child: AutoSizeText(
             label,
             style: const TextStyle(fontSize: 40, color: Colors.black54),