Fixed calculator height issues, better dynamic themes.

Author: sszajbely

lib/components/helpers/calculator.dart

@@ -1,9 +1,11 @@
 import 'package:csocsort_szamla/helpers/currencies.dart';
+import 'package:csocsort_szamla/helpers/providers/screen_width_provider.dart';
 import 'package:csocsort_szamla/helpers/validation_rules.dart';
 import 'package:customized_keyboard/customized_keyboard.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 
 enum Operator { add, subtract, multiply, divide, none }
 
@@ -251,32 +253,108 @@ class CalculatorTextField extends StatelessWidget {
   }
 }
 
-class Calculator extends StatelessWidget {
-  Calculator({super.key});
+class CalculatorButton extends StatefulWidget {
+  const CalculatorButton({
+    required this.keyEvent,
+    required this.backgroundColor,
+    required this.textColor,
+    required this.child,
+    super.key,
+  });
+
+  final CustomKeyboardEvent keyEvent;
+  final Color backgroundColor;
+  final Color textColor;
+  final Widget child;
+
+  @override
+  State<CalculatorButton> createState() => _CalculatorButtonState();
+}
+
+class _CalculatorButtonState extends State<CalculatorButton> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 70),
+      reverseDuration: const Duration(milliseconds: 300),
+    )..addListener(() => setState(() {}));
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      constraints: const BoxConstraints(
-        maxHeight: 380,
-      ),
-      padding: const EdgeInsets.only(
-        left: 10,
-        right: 10,
-        top: 15,
-      ),
+    return Ink(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceContainer,
-        borderRadius: BorderRadius.circular(20),
+        color: widget.backgroundColor,
+        borderRadius: BorderRadius.circular(20 + (1 - _controller.value) * 50),
       ),
-      child: Material(
-        type: MaterialType.transparency,
-        child: Table(
-          children: [0, 1, 2, 3].map((index) {
-            return TableRow(
-              children: _generateRow(context, index),
-            );
-          }).toList(),
+      child: AspectRatio(
+        aspectRatio: 1,
+        child: InkWell(
+          onTapDown: (details) => _controller.forward(from: 0),
+          onTapUp: (details) => _controller.reverse(from: 1),
+          onTapCancel: () => _controller.reverse(from: 1),
+          overlayColor: WidgetStateProperty.all(Colors.transparent),
+          onTap: () {
+            HapticFeedback.lightImpact();
+            final keyboardWrapper = KeyboardWrapper.of(context);
+            if (keyboardWrapper == null) {
+              throw KeyboardWrapperNotFound();
+            }
+            keyboardWrapper.onKey(widget.keyEvent);
+          },
+          child: Center(child: widget.child),
+        ),
+      ),
+    );
+  }
+}
+
+class CalculatorKeyboard extends CustomKeyboard {
+  @override
+  Widget build(BuildContext context) {
+    return TextFieldTapRegion(
+      child: Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surfaceContainerHigh,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        child: Material(
+          type: MaterialType.transparency,
+          child: OverflowBox(
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: context.read<ScreenSize>().width,
+            maxHeight: 380,
+            child: Center(
+              child: Container(
+                constraints: const BoxConstraints(
+                  maxHeight: 380,
+                  maxWidth: (370 / 4 * 5),
+                ),
+                padding: const EdgeInsets.only(
+                  left: 10,
+                  right: 10,
+                ),
+                child: Table(
+                  children: [0, 1, 2, 3].map((index) {
+                    return TableRow(
+                      children: _generateRow(context, index),
+                    );
+                  }).toList(),
+                ),
+              ),
+            ),
+          ),
         ),
       ),
     );
@@ -334,82 +412,6 @@ class Calculator extends StatelessWidget {
       );
     }).toList();
   }
-}
-
-class CalculatorButton extends StatefulWidget {
-  const CalculatorButton({
-    required this.keyEvent,
-    required this.backgroundColor,
-    required this.textColor,
-    required this.child,
-    super.key,
-  });
-
-  final CustomKeyboardEvent keyEvent;
-  final Color backgroundColor;
-  final Color textColor;
-  final Widget child;
-
-  @override
-  State<CalculatorButton> createState() => _CalculatorButtonState();
-}
-
-class _CalculatorButtonState extends State<CalculatorButton> with SingleTickerProviderStateMixin {
-  late AnimationController _controller;
-
-  @override
-  void initState() {
-    super.initState();
-    _controller = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 70),
-      reverseDuration: const Duration(milliseconds: 300),
-    )..addListener(() => setState(() {}));
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return AspectRatio(
-      aspectRatio: 1,
-      child: Ink(
-        decoration: BoxDecoration(
-          color: widget.backgroundColor,
-          borderRadius: BorderRadius.circular(20 + (1 - _controller.value) * 50),
-        ),
-        child: AspectRatio(
-          aspectRatio: 1,
-          child: InkWell(
-            onTapDown: (details) => _controller.forward(from: 0),
-            onTapUp: (details) => _controller.reverse(from: 1),
-            onTapCancel: () => _controller.reverse(from: 1),
-            overlayColor: WidgetStateProperty.all(Colors.transparent),
-            onTap: () {
-              HapticFeedback.lightImpact();
-              final keyboardWrapper = KeyboardWrapper.of(context);
-              if (keyboardWrapper == null) {
-                throw KeyboardWrapperNotFound();
-              }
-              keyboardWrapper.onKey(widget.keyEvent);
-            },
-            child: Center(child: widget.child),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class CalculatorKeyboard extends CustomKeyboard {
-  @override
-  Widget build(BuildContext context) {
-    return TextFieldTapRegion(child: Calculator());
-  }
 
   @override
   double get height => 380;

lib/helpers/app_theme.dart

@@ -1,5 +1,7 @@
+import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:material_color_utilities/material_color_utilities.dart';
 
 enum ThemeType {
   simpleColor(false),
@@ -419,10 +421,11 @@ class AppTheme {
           onErrorContainer: Color(0xff410002),
           surface: Color(0xfff6fff6),
           onSurface: Color(0xff151d18),
-          surfaceContainer: Color(0xffeef0e7),
-          surfaceContainerLow: Color(0xfff1f5ec),
-          surfaceContainerHigh: Color(0xffd4e3d9),
-          surfaceContainerHighest: Color(0xffebeae1),
+          surfaceContainer: Color(0xFFF4F1F0),
+          surfaceContainerLow: Color(0xfff6f3f1),
+          surfaceContainerLowest: Color(0xffffffff),
+          surfaceContainerHigh: Color(0xFFEEECEA),
+          surfaceContainerHighest: Color(0xffe5e2e0),
           onSurfaceVariant: Color(0xff3c4a41),
           outline: Color(0xff6a7a6f),
           outlineVariant: Color(0xffbacbbe),
@@ -451,12 +454,14 @@ class AppTheme {
           onError: Color(0xff690005),
           errorContainer: Color(0xff93000a),
           onErrorContainer: Color(0xffffb4ab),
-          surface: Color(0xff151d18),
-          onSurface: Color(0xffdce5dc),
-          surfaceContainerHighest: Color(0xff3c4a41),
-          surfaceContainerLow: Color(0xff20241f),
-          surfaceContainer: Color(0xff272823),
-          onSurfaceVariant: Color(0xffbacbbe),
+          surface: Color(0xff131313),
+          onSurface: Color(0xffe5e2e0),
+          surfaceContainerHighest: Color(0xff353534),
+          surfaceContainerLow: Color(0xff1b1c1b),
+          surfaceContainerLowest: Color(0xff0e0e0e),
+          surfaceContainerHigh: Color(0xff2a2a29),
+          surfaceContainer: Color(0xff1f201f),
+          onSurfaceVariant: Color(0xffdac1bd),
           outline: Color(0xff859589),
           outlineVariant: Color(0xff3c4a41),
           inverseSurface: Color(0xffdce5dc),
@@ -509,49 +514,41 @@ class AppTheme {
     AppTheme.themes.remove(ThemeName.darkDynamic);
   }
 
-  static void addDynamicThemes(ColorScheme lightScheme, ColorScheme darkScheme) {
+  static void addDynamicThemes(CorePalette palette) async {
+    ColorScheme lightScheme = palette.toColorScheme();
+    ColorScheme darkScheme = palette.toColorScheme(brightness: Brightness.dark);
+    if (AppTheme.themes.containsKey(ThemeName.lightDynamic) && AppTheme.themes[ThemeName.lightDynamic]!.colorScheme.primary == lightScheme.primary) {
+      print('Dynamic themes already added');
+      return;
+    }
     try {
-      ColorScheme otherlightScheme = ColorScheme.fromSeed(seedColor: lightScheme.primary, brightness: Brightness.light);
-      ColorScheme otherDarkScheme = ColorScheme.fromSeed(seedColor: darkScheme.primary, brightness: Brightness.dark);
-
-      lightScheme = lightScheme.copyWith(
-        surface: otherlightScheme.surface,
-        onSurface: otherlightScheme.onSurface,
-        surfaceBright: otherlightScheme.surfaceBright,
-        surfaceDim: otherlightScheme.surfaceDim,
-        surfaceContainer: otherlightScheme.surfaceContainer,
-        surfaceContainerHigh: otherlightScheme.surfaceContainerHigh,
-        surfaceContainerLow: otherlightScheme.surfaceContainerLow,
-        surfaceContainerHighest: otherlightScheme.surfaceContainerHighest,
-        surfaceContainerLowest: otherlightScheme.surfaceContainerLowest,
-      );
-
-      darkScheme = darkScheme.copyWith(
-        surface: otherDarkScheme.surface,
-        onSurface: otherDarkScheme.onSurface,
-        surfaceBright: otherDarkScheme.surfaceBright,
-        surfaceDim: otherDarkScheme.surfaceDim,
-        surfaceContainer: otherDarkScheme.surfaceContainer,
-        surfaceContainerHigh: otherDarkScheme.surfaceContainerHigh,
-        surfaceContainerLow: otherDarkScheme.surfaceContainerLow,
-        surfaceContainerHighest: otherDarkScheme.surfaceContainerHighest,
-        surfaceContainerLowest: otherDarkScheme.surfaceContainerLowest,
-      );
-
       lightScheme = lightScheme.copyWith(
-        surfaceContainerLow: ElevationOverlay.applySurfaceTint(lightScheme.surface, lightScheme.primary, 3),
+        surface: Color(palette.neutral.get(98)),
+        surfaceBright: Color(palette.neutral.get(98)),
+        surfaceDim: Color(palette.neutral.get(87)),
+        surfaceContainerLowest: Color(palette.neutral.get(100)),
+        surfaceContainerLow: Color(palette.neutral.get(96)),
+        surfaceContainer: Color(palette.neutral.get(94)),
+        surfaceContainerHigh: Color(palette.neutral.get(92)),
+        surfaceContainerHighest: Color(palette.neutral.get(90)),
       );
 
       darkScheme = darkScheme.copyWith(
-        surfaceContainerLow: ElevationOverlay.applySurfaceTint(darkScheme.surface, darkScheme.primary, 3),
+        surface: Color(palette.neutral.get(6)),
+        surfaceBright: Color(palette.neutral.get(24)),
+        surfaceDim: Color(palette.neutral.get(6)),
+        surfaceContainerLowest: Color(palette.neutral.get(4)),
+        surfaceContainerLow: Color(palette.neutral.get(10)),
+        surfaceContainer: Color(palette.neutral.get(12)),
+        surfaceContainerHigh: Color(palette.neutral.get(17)),
+        surfaceContainerHighest: Color(palette.neutral.get(22)),
       );
 
       AppTheme.themes[ThemeName.lightDynamic] = ThemeData.from(
         colorScheme: lightScheme,
         useMaterial3: true,
       ).copyWith(
         cardTheme: CardTheme(
-          color: lightScheme.surfaceContainerLow,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(15),
           ),
@@ -573,7 +570,6 @@ class AppTheme {
         useMaterial3: true,
       ).copyWith(
         cardTheme: CardTheme(
-          color: darkScheme.surfaceContainerLow,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(15),
           ),

lib/helpers/providers/app_theme_provider.dart

@@ -32,10 +32,11 @@ class AppThemeProvider extends StatelessWidget {
   Widget build(BuildContext context) {
     return ChangeNotifierProvider.value(
       value: _appTheme,
-      builder: (context, _) => DynamicColorBuilder(
-        builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
-          if (lightDynamic != null && !AppTheme.themes.containsKey(ThemeName.lightDynamic)) {
-            AppTheme.addDynamicThemes(lightDynamic, darkDynamic!);
+      builder: (context, _) => FutureBuilder(
+        future: DynamicColorPlugin.getCorePalette(),
+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            AppTheme.addDynamicThemes(snapshot.data!);
           }
           return builder(context);
         },

pubspec.yaml

@@ -12,7 +12,7 @@ description: Csocsort
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 
-version: 4.4.0+5126 # 5 is the number of an appbundle, the digits after is the version number
+version: 4.4.1+5127 # 5 is the number of an appbundle, the digits after is the version number
 
 environment:
   sdk: '>=3.0.0'