fix(theme): Material Check/Radio color (#871)

Fixes #870
ubuntu · Mar 4, 2024 · 116e36f · 116e36f
1 parent eb88458
commit 116e36f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/example/lib/pages/theme_page/src/controls/toggleables.dart b/example/lib/pages/theme_page/src/controls/toggleables.dart
@@ -2,9 +2,38 @@ import 'package:flutter/material.dart';
 
 import '../constants.dart';
 
-class Toggleables extends StatelessWidget {
+class Toggleables extends StatefulWidget {
   const Toggleables({super.key});
 
+  @override
+  State<Toggleables> createState() => _ToggleablesState();
+}
+
+class _ToggleablesState extends State<Toggleables> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      ScaffoldMessenger.of(context).showMaterialBanner(
+        MaterialBanner(
+          content: const Padding(
+            padding: EdgeInsets.all(8.0),
+            child: Text(
+              'Info: those are just Fallback toggleables. Please use YaruCheckBox and YaruRadio instead',
+            ),
+          ),
+          actions: [
+            TextButton(
+              onPressed: () =>
+                  ScaffoldMessenger.of(context).clearMaterialBanners(),
+              child: const Text('OK'),
+            ),
+          ],
+        ),
+      );
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Wrap(

diff --git a/lib/src/themes/common_themes.dart b/lib/src/themes/common_themes.dart
@@ -398,12 +398,16 @@ Color _getSwitchTrackColor(Set<MaterialState> states, ColorScheme colorScheme) {
 
 // Checks & Radios
 
-Color _getCheckFillColor(Set<MaterialState> states, ColorScheme colorScheme) {
+Color _getToggleFillColor({
+  required Set<MaterialState> states,
+  required ColorScheme colorScheme,
+  required bool radio,
+}) {
   if (!states.contains(MaterialState.disabled)) {
     if (states.contains(MaterialState.selected)) {
       return colorScheme.primary;
     }
-    return colorScheme.onSurface.withOpacity(0.75);
+    return colorScheme.onSurface.withOpacity(radio ? 0.5 : 0.14);
   }
   if (states.contains(MaterialState.selected)) {
     return colorScheme.onSurface.withOpacity(0.2);
@@ -426,8 +430,16 @@ CheckboxThemeData _createCheckBoxTheme(ColorScheme colorScheme) {
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(kCheckRadius),
     ),
+    side: BorderSide(
+      color: colorScheme.outline
+          .scale(lightness: colorScheme.isLight ? -0.6 : 0.5),
+    ),
     fillColor: MaterialStateProperty.resolveWith(
-      (states) => _getCheckFillColor(states, colorScheme),
+      (states) => _getToggleFillColor(
+        states: states,
+        colorScheme: colorScheme,
+        radio: false,
+      ),
     ),
     checkColor: MaterialStateProperty.resolveWith(
       (states) => _getCheckColor(states, colorScheme),
@@ -438,7 +450,11 @@ CheckboxThemeData _createCheckBoxTheme(ColorScheme colorScheme) {
 RadioThemeData _createRadioTheme(ColorScheme colorScheme) {
   return RadioThemeData(
     fillColor: MaterialStateProperty.resolveWith(
-      (states) => _getCheckFillColor(states, colorScheme),
+      (states) => _getToggleFillColor(
+        states: states,
+        colorScheme: colorScheme,
+        radio: true,
+      ),
     ),
   );
 }