Fix colors in debug widget

glade_forms/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.1.1
+- Add typedefs `IntInput` and `BooleanInput`
+- Fix GladeModelDebugInfo colors in DarkMode.
+
 ## 3.1.0
 - updated dependencies
 

glade_forms/lib/src/core/glade_input.dart

@@ -23,7 +23,9 @@ typedef OnDependencyChange = void Function(List<String> updateInputKeys);
 typedef ValueTransform<T> = T Function(T input);
 
 typedef StringInput = GladeInput<String>;
+typedef StringInputNullable = GladeInput<String?>;
 typedef IntInput = GladeInput<int>;
+typedef BooleanInput = GladeInput<bool>;
 
 class GladeInput<T> {
   /// Compares initial and current value.
@@ -329,7 +331,7 @@ class GladeInput<T> {
   // ignore: use_setters_to_change_properties, as method.
   void bindToModel(GladeModel model) => _bindedModel = model;
 
-  static GladeInput<int> intInput({
+  static IntInput intInput({
     required int value,
     String? inputKey,
     int? initialValue,
@@ -368,7 +370,7 @@ class GladeInput<T> {
     );
   }
 
-  static GladeInput<bool> boolInput({
+  static BooleanInput boolInput({
     required bool value,
     String? inputKey,
     bool? initialValue,
@@ -404,7 +406,7 @@ class GladeInput<T> {
         trackUnchanged: trackUnchanged,
       );
 
-  static GladeInput<String> stringInput({
+  static StringInput stringInput({
     String? inputKey,
     String? value,
     String? initialValue,

glade_forms/lib/src/widgets/glade_model_debug_info.dart

@@ -199,7 +199,7 @@ class _Table extends StatelessWidget {
       children: [
         // Columns header.
         TableRow(
-          decoration: const BoxDecoration(color: Colors.black12, border: Border(bottom: BorderSide())),
+          decoration: const BoxDecoration(color: Colors.black, border: Border(bottom: BorderSide())),
           children: [
             const _ColumnHeader('Input'),
             if (showIsUnchanged) const _ColumnHeader('isUnchanged'),
@@ -213,7 +213,9 @@ class _Table extends StatelessWidget {
         ),
         for (final (index, x) in inputs.indexed)
           TableRow(
-            decoration: BoxDecoration(color: index.isEven ? Colors.white : const Color.fromARGB(255, 235, 234, 234)),
+            decoration: BoxDecoration(
+              color: index.isEven ? Theme.of(context).canvasColor : Theme.of(context).canvasColor.darken(0.2),
+            ),
             children: [
               Padding(
                 padding: const EdgeInsets.only(left: 5),
@@ -305,10 +307,14 @@ class _StringValue extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Text(
-      x ?? '',
-      style:
-          Theme.of(context).textTheme.bodyMedium?.copyWith(backgroundColor: const Color.fromARGB(255, 196, 222, 184)),
+    return ColoredBox(
+      color: Theme.of(context).brightness == Brightness.light
+          ? const Color.fromARGB(255, 196, 222, 184)
+          : const Color.fromARGB(255, 15, 46, 0),
+      child: Text(
+        x ?? '',
+        //style: Theme.of(context).textTheme.bodyLarge?.copyWith(backgroundColor: ),
+      ),
     );
   }
 }
@@ -390,3 +396,15 @@ class _DangerStrips extends StatelessWidget {
     return stripes;
   }
 }
+
+extension _ColorExtensions on Color {
+  /// Returns color darkened by [amount].
+  Color darken([double amount = 0.1]) {
+    assert(amount >= 0 && amount <= 1, 'amount must be between 0 and 1');
+
+    final hsl = HSLColor.fromColor(this);
+    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
+
+    return hslDark.toColor();
+  }
+}

glade_forms/pubspec.yaml

@@ -1,6 +1,6 @@
 name: glade_forms
 description: A universal way to define form validators with support of translations.
-version: 3.1.0
+version: 3.1.1
 repository: https://github.com/netglade/glade_forms
 issue_tracker: https://github.com/netglade/glade_forms/issues
 screenshots: