integrated a beautify button in JSON codegen and also highlighted the key and string text.

This commit is contained in:
Mrudul-2
2025-02-22 13:49:02 +05:30
parent d6ea9f3404
commit ce5278f02b
4 changed files with 79 additions and 62 deletions

View File

@@ -140,12 +140,11 @@ class HisRequestBody extends ConsumerWidget {
// TODO: Fix JsonTextFieldEditor & plug it here // TODO: Fix JsonTextFieldEditor & plug it here
ContentType.json => Padding( ContentType.json => Padding(
padding: kPt5o10, padding: kPt5o10,
child: TextFieldEditor( child: JsonTextFieldEditor(
key: Key("${selectedHistoryModel?.historyId}-json-body"), key: Key("${selectedHistoryModel?.historyId}-json-body"),
fieldKey: fieldKey:
"${selectedHistoryModel?.historyId}-json-body-viewer", "${selectedHistoryModel?.historyId}-json-body-viewer",
initialValue: requestModel?.body, initialValue: requestModel?.body,
readOnly: true,
), ),
), ),
_ => Padding( _ => Padding(

View File

@@ -64,7 +64,7 @@ class EditRequestBody extends ConsumerWidget {
// TODO: Fix JsonTextFieldEditor & plug it here // TODO: Fix JsonTextFieldEditor & plug it here
ContentType.json => Padding( ContentType.json => Padding(
padding: kPt5o10, padding: kPt5o10,
child: TextFieldEditor( child: JsonTextFieldEditor(
key: Key("$selectedId-json-body"), key: Key("$selectedId-json-body"),
fieldKey: "$selectedId-json-body-editor", fieldKey: "$selectedId-json-body-editor",
initialValue: requestModel?.httpRequestModel?.body, initialValue: requestModel?.httpRequestModel?.body,
@@ -74,7 +74,6 @@ class EditRequestBody extends ConsumerWidget {
.read(collectionStateNotifierProvider.notifier) .read(collectionStateNotifierProvider.notifier)
.update(body: value); .update(body: value);
}, },
hintText: kHintJson,
), ),
), ),
_ => Padding( _ => Padding(

View File

@@ -1,5 +1,8 @@
import 'package:apidash/widgets/widgets.dart';
import 'dart:math' as math; import 'dart:math' as math;
import 'package:apidash/consts.dart'; import 'package:apidash/consts.dart';
import 'package:apidash/utils/utils.dart';
import 'dart:convert';
import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@@ -59,71 +62,84 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
if (widget.initialValue != null) { if (widget.initialValue != null) {
controller.text = widget.initialValue!; controller.text = widget.initialValue!;
} }
return CallbackShortcuts( return Column(
bindings: <ShortcutActivator, VoidCallback>{ mainAxisSize: MainAxisSize.max,
const SingleActivator(LogicalKeyboardKey.tab): () { children: [
insertTab(); Align(
}, alignment: Alignment.topRight,
}, child: IconButton(
child: JsonTextField( icon: const Icon(Icons.format_align_left),
stringHighlightStyle: kCodeStyle.copyWith( onPressed: () {
color: Theme.of(context).colorScheme.secondary, controller.formatJson(sortJson: false);
},
),
), ),
keyHighlightStyle: kCodeStyle.copyWith( Expanded(
color: Theme.of(context).colorScheme.primary, child: CallbackShortcuts(
fontWeight: FontWeight.bold, bindings: <ShortcutActivator, VoidCallback>{
), const SingleActivator(LogicalKeyboardKey.tab): () {
errorContainerDecoration: BoxDecoration( insertTab();
color: Theme.of(context).colorScheme.error.withOpacity( },
kForegroundOpacity, },
child: JsonTextField(
stringHighlightStyle: kCodeStyle.copyWith(
color: kColorJSONString,
), ),
borderRadius: kBorderRadius8, keyHighlightStyle: kCodeStyle.copyWith(
), color: kColorJSONKey,
showErrorMessage: true, fontWeight: FontWeight.bold,
isFormatting: true, ),
key: Key(widget.fieldKey), errorContainerDecoration: BoxDecoration(
controller: controller, color: Theme.of(context).colorScheme.error.withOpacity(
focusNode: editorFocusNode, kForegroundOpacity,
keyboardType: TextInputType.multiline, ),
expands: true, borderRadius: kBorderRadius8,
maxLines: null, ),
style: kCodeStyle, showErrorMessage: true,
textAlignVertical: TextAlignVertical.top, isFormatting: true,
onChanged: (value) { key: Key(widget.fieldKey),
controller.formatJson(sortJson: false); controller: controller,
widget.onChanged?.call(value); focusNode: editorFocusNode,
}, keyboardType: TextInputType.multiline,
decoration: InputDecoration( expands: true,
hintText: kHintJson, maxLines: null,
hintStyle: TextStyle( style: kCodeStyle,
color: Theme.of(context).colorScheme.outline.withOpacity( textAlignVertical: TextAlignVertical.top,
kHintOpacity, decoration: InputDecoration(
hintText: kHintJson,
hintStyle: TextStyle(
color: Theme.of(context).colorScheme.outline.withOpacity(
kHintOpacity,
),
), ),
), focusedBorder: OutlineInputBorder(
focusedBorder: OutlineInputBorder( borderRadius: kBorderRadius8,
borderRadius: kBorderRadius8, borderSide: BorderSide(
borderSide: BorderSide( color: Theme.of(context).colorScheme.primary.withOpacity(
color: Theme.of(context).colorScheme.primary.withOpacity( kHintOpacity,
kHintOpacity, ),
), ),
),
enabledBorder: OutlineInputBorder(
borderRadius: kBorderRadius8,
borderSide: BorderSide(
color:
Theme.of(context).colorScheme.surfaceContainerHighest,
),
),
filled: true,
hoverColor: kColorTransparent,
fillColor: Color.alphaBlend(
(Theme.of(context).brightness == Brightness.dark
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.primaryContainer)
.withOpacity(kForegroundOpacity),
Theme.of(context).colorScheme.surface),
),
), ),
), ),
enabledBorder: OutlineInputBorder(
borderRadius: kBorderRadius8,
borderSide: BorderSide(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
),
),
filled: true,
hoverColor: kColorTransparent,
fillColor: Color.alphaBlend(
(Theme.of(context).brightness == Brightness.dark
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.primaryContainer)
.withOpacity(kForegroundOpacity),
Theme.of(context).colorScheme.surface),
), ),
), ],
); );
} }
} }

View File

@@ -9,6 +9,9 @@ const kColorRed = Colors.red;
final kColorLightDanger = Colors.red.withOpacity(0.9); final kColorLightDanger = Colors.red.withOpacity(0.9);
const kColorDarkDanger = Color(0xffcf6679); const kColorDarkDanger = Color(0xffcf6679);
const kColorJSONKey = Color(0xFF1757BA);
const kColorJSONString = Color(0xFFA82323);
const kColorSchemeSeed = Colors.blue; const kColorSchemeSeed = Colors.blue;
final kColorStatusCodeDefault = Colors.grey.shade700; final kColorStatusCodeDefault = Colors.grey.shade700;