Add separate styles for properties and classes/arrays

example/lib/main.dart

@@ -231,11 +231,16 @@ class _DataExplorerPageState extends State<DataExplorerPage> {
 
                     /// Theme definitions of the json data explorer
                     theme: DataExplorerTheme(
-                      keyTextStyle: GoogleFonts.inconsolata(
+                      rootKeyTextStyle: GoogleFonts.inconsolata(
                         color: Colors.black,
                         fontWeight: FontWeight.bold,
                         fontSize: 16,
                       ),
+                      propertyKeyTextStyle: GoogleFonts.inconsolata(
+                        color: Colors.black.withOpacity(0.7),
+                        fontWeight: FontWeight.bold,
+                        fontSize: 16,
+                      ),
                       keySearchHighlightTextStyle: GoogleFonts.inconsolata(
                         color: Colors.black,
                         backgroundColor: const Color(0xFFFFEDAD),

lib/src/data_explorer_theme.dart

@@ -3,18 +3,23 @@ import 'package:flutter/material.dart';
 /// Theme used to display the [JsonDataExplorer].
 @immutable
 class DataExplorerTheme {
-  /// Text style use to display the keys of json attributes.
-  final TextStyle? keyTextStyle;
+  /// Text style used to display json class/arrays key attributes.
+  ///
+  /// Defaults to [propertyKeyTextStyle] if not set.
+  final TextStyle rootKeyTextStyle;
+
+  /// Text style used to display json property key attributes.
+  final TextStyle propertyKeyTextStyle;
 
   /// Text style to display the values of of json attributes.
-  final TextStyle? valueTextStyle;
+  final TextStyle valueTextStyle;
 
   /// Text style use to highlight search result matches on json attribute keys.
-  final TextStyle? keySearchHighlightTextStyle;
+  final TextStyle keySearchHighlightTextStyle;
 
   /// Text style use to highlight search result matches on json attribute
   /// values.
-  final TextStyle? valueSearchHighlightTextStyle;
+  final TextStyle valueSearchHighlightTextStyle;
 
   /// Indentation lines color.
   final Color indentationLineColor;
@@ -31,24 +36,52 @@ class DataExplorerTheme {
   /// null to disable the highlight.
   final Color? highlightColor;
 
-  const DataExplorerTheme({
-    this.keyTextStyle,
-    this.keySearchHighlightTextStyle,
-    this.valueTextStyle,
-    this.valueSearchHighlightTextStyle,
+  DataExplorerTheme({
+    TextStyle? rootKeyTextStyle,
+    TextStyle? propertyKeyTextStyle,
+    TextStyle? keySearchHighlightTextStyle,
+    TextStyle? valueTextStyle,
+    TextStyle? valueSearchHighlightTextStyle,
+    this.indentationLineColor = Colors.grey,
+    this.highlightColor,
+    this.indentationPadding = 8.0,
+    this.propertyIndentationPaddingFactor = 4,
+  })  : rootKeyTextStyle = rootKeyTextStyle ??
+            (propertyKeyTextStyle ??
+                DataExplorerTheme.defaultTheme.rootKeyTextStyle),
+        propertyKeyTextStyle = propertyKeyTextStyle ??
+            DataExplorerTheme.defaultTheme.rootKeyTextStyle,
+        keySearchHighlightTextStyle = keySearchHighlightTextStyle ??
+            DataExplorerTheme.defaultTheme.keySearchHighlightTextStyle,
+        valueTextStyle =
+            valueTextStyle ?? DataExplorerTheme.defaultTheme.valueTextStyle,
+        valueSearchHighlightTextStyle = valueSearchHighlightTextStyle ??
+            DataExplorerTheme.defaultTheme.valueSearchHighlightTextStyle;
+
+  const DataExplorerTheme._({
+    required this.rootKeyTextStyle,
+    required this.propertyKeyTextStyle,
+    required this.keySearchHighlightTextStyle,
+    required this.valueTextStyle,
+    required this.valueSearchHighlightTextStyle,
     this.indentationLineColor = Colors.grey,
     this.highlightColor,
     this.indentationPadding = 8.0,
     this.propertyIndentationPaddingFactor = 4,
   });
 
   /// Default theme used if no theme is set.
-  static const defaultTheme = DataExplorerTheme(
-    keyTextStyle: TextStyle(
+  static const defaultTheme = DataExplorerTheme._(
+    rootKeyTextStyle: TextStyle(
       fontSize: 14,
       color: Colors.black,
       fontWeight: FontWeight.bold,
     ),
+    propertyKeyTextStyle: TextStyle(
+      fontSize: 14,
+      color: Colors.black54,
+      fontWeight: FontWeight.bold,
+    ),
     valueTextStyle: TextStyle(
       fontSize: 14,
       color: Colors.redAccent,
@@ -68,7 +101,8 @@ class DataExplorerTheme {
   );
 
   DataExplorerTheme copyWith({
-    TextStyle? keyTextStyle,
+    TextStyle? rootKeyTextStyle,
+    TextStyle? propertyKeyTextStyle,
     TextStyle? keySearchHighlightTextStyle,
     TextStyle? valueTextStyle,
     TextStyle? valueSearchHighlightTextStyle,
@@ -78,12 +112,13 @@ class DataExplorerTheme {
     double? propertyIndentationPaddingFactor,
   }) =>
       DataExplorerTheme(
-        keyTextStyle: keyTextStyle ?? this.keyTextStyle,
+        rootKeyTextStyle: rootKeyTextStyle ?? this.rootKeyTextStyle,
+        propertyKeyTextStyle: propertyKeyTextStyle ?? this.propertyKeyTextStyle,
         keySearchHighlightTextStyle:
             keySearchHighlightTextStyle ?? this.keySearchHighlightTextStyle,
         valueTextStyle: valueTextStyle ?? this.valueTextStyle,
         valueSearchHighlightTextStyle:
-            keyTextStyle ?? this.valueSearchHighlightTextStyle,
+            valueSearchHighlightTextStyle ?? this.valueSearchHighlightTextStyle,
         indentationLineColor: indentationLineColor ?? this.indentationLineColor,
         highlightColor: highlightColor ?? this.highlightColor,
         indentationPadding: indentationPadding ?? this.indentationPadding,
@@ -96,7 +131,8 @@ class DataExplorerTheme {
     if (identical(this, other)) return true;
     if (other.runtimeType != runtimeType) return false;
     return other is DataExplorerTheme &&
-        keyTextStyle == other.keyTextStyle &&
+        rootKeyTextStyle == other.rootKeyTextStyle &&
+        propertyKeyTextStyle == other.propertyKeyTextStyle &&
         valueTextStyle == other.valueTextStyle &&
         indentationLineColor == other.indentationLineColor &&
         highlightColor == other.highlightColor &&
@@ -109,7 +145,8 @@ class DataExplorerTheme {
 
   @override
   int get hashCode => Object.hash(
-        keyTextStyle,
+        rootKeyTextStyle,
+        propertyKeyTextStyle,
         valueTextStyle,
         indentationLineColor,
         highlightColor,

lib/src/json_data_explorer.dart

@@ -141,20 +141,9 @@ class _JsonAttribute extends StatelessWidget {
   Widget build(BuildContext context) {
     final searchTerm =
         context.select<DataExplorerStore, String>((store) => store.searchTerm);
-    final isSearchFocused = context.select<DataExplorerStore, bool>((store) =>
-        store.searchResults.isNotEmpty
-            ? store.searchResults.elementAt(store.searchNodeFocusIndex) == node
-            : false);
 
     final attributeKeyStyle =
-        theme.keyTextStyle ?? DataExplorerTheme.defaultTheme.keyTextStyle;
-    final attributeKeySearchHighlightStyle =
-        theme.keySearchHighlightTextStyle ??
-            DataExplorerTheme.defaultTheme.keySearchHighlightTextStyle;
-    final valueStyle =
-        theme.valueTextStyle ?? DataExplorerTheme.defaultTheme.valueTextStyle;
-    final valueSearchHighlightStyle = theme.valueSearchHighlightTextStyle ??
-        DataExplorerTheme.defaultTheme.valueSearchHighlightTextStyle;
+        node.isRoot ? theme.rootKeyTextStyle : theme.propertyKeyTextStyle;
 
     return MouseRegion(
       cursor: SystemMouseCursors.click,
@@ -191,8 +180,8 @@ class _JsonAttribute extends StatelessWidget {
                 _HighlightedText(
                   text: _keyName(),
                   highlightedText: searchTerm,
-                  style: attributeKeyStyle!,
-                  highlightedStyle: attributeKeySearchHighlightStyle!,
+                  style: attributeKeyStyle,
+                  highlightedStyle: theme.keySearchHighlightTextStyle,
                 ),
                 const SizedBox(width: 4),
                 if (node.isRoot)
@@ -204,8 +193,8 @@ class _JsonAttribute extends StatelessWidget {
                       text: valueFormatter?.call(node.value) ??
                           node.value.toString(),
                       highlightedText: searchTerm,
-                      style: valueStyle!,
-                      highlightedStyle: valueSearchHighlightStyle!,
+                      style: theme.valueTextStyle,
+                      highlightedStyle: theme.valueSearchHighlightTextStyle,
                     ),
                   ),
               ],