Response Headers

lib/consts.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:davi/davi.dart';
@@ -23,6 +24,7 @@ const kP1 = EdgeInsets.all(1);
 const kP5 = EdgeInsets.all(5);
 const kP8 = EdgeInsets.all(8);
 const kPs8 = EdgeInsets.only(left: 8);
+const kPh20v5 = EdgeInsets.symmetric(horizontal: 20, vertical: 5);
 const kPh20v10 = EdgeInsets.symmetric(horizontal: 20, vertical: 10);
 const kP10 = EdgeInsets.all(10);
 
@@ -59,6 +61,8 @@ enum ContentType { json, text }
 
 const kDefaultHttpMethod = HTTPVerb.get;
 const kDefaultContentType = ContentType.json;
+
+const JsonEncoder encoder = JsonEncoder.withIndent('    ');
 const kJsonMimeType = 'application/json';
 
 const sendingIndicator = AssetImage("assets/sending.gif");

lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:apidash/providers/providers.dart';
-import 'package:apidash/widgets/editor.dart';
+import 'package:apidash/widgets/widgets.dart';
 import 'package:apidash/consts.dart';
 
 class EditRequestBody extends ConsumerStatefulWidget {
@@ -25,8 +25,7 @@ class _EditRequestBodyState extends ConsumerState<EditRequestBody> {
       margin: kP5,
       child: Column(
         children: [
-          Container(
+          SizedBox(
-            color: Theme.of(context).colorScheme.surface,
             height: kHeaderHeight,
             child: Row(
               mainAxisAlignment: MainAxisAlignment.center,

lib/screens/home_page/editor_pane/details_card/response_pane/response_tabs/response_headers.dart

@@ -1,10 +1,7 @@
-import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:flutter_json_view/flutter_json_view.dart';
 import 'package:apidash/providers/providers.dart';
-import 'package:apidash/widgets/jsonview.dart';
 import 'package:apidash/consts.dart';
 
 class ResponseHeaders extends ConsumerStatefulWidget {
@@ -28,79 +25,137 @@ class _ResponseHeadersState extends ConsumerState<ResponseHeaders> {
     final requestHeaders =
         collection[idIdx].responseModel?.requestHeaders ?? {};
     final responseHeaders = collection[idIdx].responseModel?.headers ?? {};
-    return Container(
+    return Padding(
-      decoration: kTableContainerDecoration,
+      padding: kPh20v5,
-      margin: kP5,
       child: ListView(
         children: [
-          kVSpacer5,
+          getHeaderBox(context, responseHeaders, "Response Headers"),
-          Row(
-            children: [
-              Expanded(
-                child: Text(
-                  "Request Headers (${requestHeaders.length} items)",
-                  style: kCodeStyle,
-                ),
-              ),
-              if (requestHeaders.isNotEmpty)
-                TextButton(
-                  onPressed: () async {
-                    await Clipboard.setData(
-                        ClipboardData(text: json.encode(requestHeaders)));
-                  },
-                  child: Row(
-                    children: const [
-                      Icon(
-                        Icons.content_copy,
-                        size: 20,
-                      ),
-                      Text("Copy")
-                    ],
-                  ),
-                ),
-            ],
-          ),
-          if (requestHeaders.isNotEmpty) kVSpacer5,
-          if (requestHeaders.isNotEmpty)
-            JsonView.map(
-              requestHeaders,
-              theme: jsonViewTheme,
-            ),
-          kVSpacer5,
-          Row(
-            children: [
-              Expanded(
-                child: Text(
-                  "Response Headers (${responseHeaders.length} items)",
-                  style: kCodeStyle,
-                ),
-              ),
-              if (responseHeaders.isNotEmpty)
-                TextButton(
-                  onPressed: () async {
-                    await Clipboard.setData(
-                        ClipboardData(text: json.encode(responseHeaders)));
-                  },
-                  child: Row(
-                    children: const [
-                      Icon(
-                        Icons.content_copy,
-                        size: 20,
-                      ),
-                      Text("Copy")
-                    ],
-                  ),
-                ),
-            ],
-          ),
           if (responseHeaders.isNotEmpty) kVSpacer5,
           if (responseHeaders.isNotEmpty)
-            JsonView.map(
+            getTable(
+              context,
               responseHeaders,
-              theme: jsonViewTheme,
+              ["Header Name", "Header Value"],
+            ),
+          kVSpacer10,
+          getHeaderBox(context, requestHeaders, "Request Headers"),
+          if (requestHeaders.isNotEmpty) kVSpacer5,
+          if (requestHeaders.isNotEmpty)
+            getTable(
+              context,
+              requestHeaders,
+              ["Header Name", "Header Value"],
             ),
         ],
       ),
     );
   }
+
+  Widget getHeaderBox(BuildContext context, Map map, String name) {
+    return SizedBox(
+      height: kHeaderHeight,
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              "$name (${map.length} items)",
+              style: Theme.of(context).textTheme.labelLarge!.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
+            ),
+          ),
+          if (map.isNotEmpty)
+            TextButton(
+              onPressed: () async {
+                await Clipboard.setData(
+                    ClipboardData(text: encoder.convert(map)));
+              },
+              child: Row(
+                children: const [
+                  Icon(
+                    Icons.content_copy,
+                    size: 20,
+                  ),
+                  Text("Copy")
+                ],
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget getTable(BuildContext context, Map map, List<String> headers) {
+    return Table(
+      border: TableBorder(
+        horizontalInside: BorderSide(
+          color: Theme.of(context).colorScheme.surfaceVariant,
+        ),
+      ),
+      columnWidths: const <int, TableColumnWidth>{
+        0: FlexColumnWidth(),
+        1: FlexColumnWidth(),
+      },
+      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+      children: [
+        getHeaderRow(context, headers),
+        ...getTableRowsFromMap(context, map),
+      ],
+    );
+  }
+
+  TableRow getHeaderRow(BuildContext context, List<String> headers) {
+    return TableRow(
+      children: headers
+          .map<TableCell>(
+            (e) => TableCell(
+              verticalAlignment: TableCellVerticalAlignment.top,
+              child: Padding(
+                padding: kP1,
+                child: SelectableText(
+                  e,
+                  style: kCodeStyle.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: Theme.of(context).colorScheme.primary,
+                  ),
+                ),
+              ),
+            ),
+          )
+          .toList(),
+    );
+  }
+
+  List<TableRow> getTableRowsFromMap(BuildContext context, Map map) {
+    return map.entries
+        .map<TableRow>(
+          (entry) => TableRow(
+            children: [
+              TableCell(
+                verticalAlignment: TableCellVerticalAlignment.top,
+                child: Padding(
+                  padding: kP1,
+                  child: SelectableText(
+                    entry.key,
+                    style: kCodeStyle.copyWith(
+                      color: Theme.of(context).colorScheme.tertiary,
+                    ),
+                  ),
+                ),
+              ),
+              TableCell(
+                verticalAlignment: TableCellVerticalAlignment.top,
+                child: Padding(
+                  padding: kP1,
+                  child: SelectableText(
+                    entry.value,
+                    style: kCodeStyle,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        )
+        .toList();
+  }
 }

lib/widgets/jsonview.dart

@@ -1,18 +0,0 @@
-import 'package:flutter_json_view/flutter_json_view.dart';
-import 'package:apidash/consts.dart';
-import 'package:flutter/material.dart';
-
-final jsonViewTheme = JsonViewTheme(
-  defaultTextStyle: kCodeStyle,
-  viewType: JsonViewType.collapsible,
-  backgroundColor: kColorBg,
-  stringStyle: const TextStyle(color: Colors.brown),
-  closeIcon: const Icon(
-    Icons.arrow_drop_up,
-    size: 18,
-  ),
-  openIcon: const Icon(
-    Icons.arrow_drop_down,
-    size: 18,
-  ),
-);