From e8e5fb2fd8971086d25d780c7d80fdbf07ef1378 Mon Sep 17 00:00:00 2001 From: Victor Botamedi Date: Thu, 24 Mar 2022 12:28:40 -0300 Subject: [PATCH] Add separate styles for properties and classes/arrays --- example/lib/main.dart | 7 +++- lib/src/data_explorer_theme.dart | 71 ++++++++++++++++++++++++-------- lib/src/json_data_explorer.dart | 21 +++------- 3 files changed, 65 insertions(+), 34 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 830aafe..a3dbe63 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -229,11 +229,16 @@ class _DataExplorerPageState extends State { /// 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), diff --git a/lib/src/data_explorer_theme.dart b/lib/src/data_explorer_theme.dart index 6af05dc..f8b998b 100644 --- a/lib/src/data_explorer_theme.dart +++ b/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,11 +36,34 @@ 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, @@ -43,12 +71,17 @@ class DataExplorerTheme { }); /// 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, diff --git a/lib/src/json_data_explorer.dart b/lib/src/json_data_explorer.dart index 4b29030..e569003 100644 --- a/lib/src/json_data_explorer.dart +++ b/lib/src/json_data_explorer.dart @@ -141,20 +141,9 @@ class _JsonAttribute extends StatelessWidget { Widget build(BuildContext context) { final searchTerm = context.select((store) => store.searchTerm); - final isSearchFocused = context.select((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, ), ), ],