Fully functional prototype with final UI design

lib/components/editor_pane/body_editor.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../../providers/providers.dart';
+import '../styles.dart';
 import '../../consts.dart';
 
 class EditRequestBody extends StatefulWidget {
@@ -13,23 +14,92 @@ class EditRequestBody extends StatefulWidget {
 class _EditRequestBodyState extends State<EditRequestBody> {
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        Padding(
-          padding: const EdgeInsets.all(10),
-          child: Row(
-            children: [
-              SizedBox(
-                child: DropdownButtonBodyContentType(),
-                height: 30,
-              )
-            ],
+    return Container(
+      decoration: tableContainerDecoration,
+      margin: p5,
+      child: Column(
+        children: [
+          Padding(
+            padding: p10,
+            child: Row(
+              children: const [
+                Text(
+                  "Select Content Type:",
+                  //style: Theme.of(context).textTheme.titleMedium,
+                ),
+                SizedBox(
+                  height: 30,
+                  child: DropdownButtonBodyContentType(),
+                ),
+              ],
+            ),
           ),
-        ),
-        Expanded(
-          child: TextFieldEditor(),
-        )
-      ],
+          const Divider(),
+          const Expanded(
+            child: Padding(
+              padding: p10,
+              child: TextFieldEditor(),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class DropdownButtonBodyContentType extends ConsumerStatefulWidget {
+  const DropdownButtonBodyContentType({
+    super.key,
+  });
+
+  @override
+  ConsumerState<DropdownButtonBodyContentType> createState() =>
+      _DropdownButtonBodyContentTypeState();
+}
+
+class _DropdownButtonBodyContentTypeState
+    extends ConsumerState<DropdownButtonBodyContentType> {
+  @override
+  Widget build(BuildContext context) {
+    final activeId = ref.watch(activeItemIdStateProvider);
+    final collection = ref.read(collectionStateNotifierProvider);
+    final idIdx = collection.indexWhere((m) => m.id == activeId);
+    final requestBodyContentType = ref.watch(collectionStateNotifierProvider
+        .select((value) => value[idIdx].requestBodyContentType));
+    return DropdownButton<ContentType>(
+      focusColor: colorGrey50,
+      value: requestBodyContentType,
+      icon: const Icon(
+        Icons.unfold_more_rounded,
+        size: 16,
+      ),
+      elevation: 4,
+      style: codeStyle.copyWith(
+          color: Theme.of(context)
+              .colorScheme
+              .primary), //Theme.of(context).textTheme.bodyMedium,
+      underline: Container(
+        height: 0,
+      ),
+      onChanged: (ContentType? value) {
+        ref
+            .read(collectionStateNotifierProvider.notifier)
+            .update(activeId!, requestBodyContentType: value);
+      },
+      borderRadius: borderRadius10,
+      items: ContentType.values
+          .map<DropdownMenuItem<ContentType>>((ContentType value) {
+        return DropdownMenuItem<ContentType>(
+          value: value,
+          child: Padding(
+            padding: const EdgeInsets.only(left: 8),
+            child: Text(
+              value.name,
+              style: textStyleButton,
+            ),
+          ),
+        );
+      }).toList(),
     );
   }
 }
@@ -61,9 +131,10 @@ class _TextFieldEditorState extends ConsumerState<TextFieldEditor> {
             .read(collectionStateNotifierProvider.notifier)
             .update(activeId, requestBody: value);
       },
+      style: codeStyle,
       decoration: InputDecoration(
-        hintText: "Enter body",
-        hintStyle: TextStyle(color: Colors.grey.shade500),
+        hintText: "Enter content (body)",
+        hintStyle: codeStyle.copyWith(color: colorGrey500),
         border: InputBorder.none,
       ),
       keyboardType: TextInputType.multiline,
@@ -72,55 +143,3 @@ class _TextFieldEditorState extends ConsumerState<TextFieldEditor> {
     );
   }
 }
-
-class DropdownButtonBodyContentType extends ConsumerStatefulWidget {
-  const DropdownButtonBodyContentType({
-    super.key,
-  });
-
-  @override
-  ConsumerState<DropdownButtonBodyContentType> createState() =>
-      _DropdownButtonBodyContentTypeState();
-}
-
-class _DropdownButtonBodyContentTypeState
-    extends ConsumerState<DropdownButtonBodyContentType> {
-  @override
-  Widget build(BuildContext context) {
-    final activeId = ref.watch(activeItemIdStateProvider);
-    final reqestModel = ref
-        .read(collectionStateNotifierProvider.notifier)
-        .getRequestModel(activeId!);
-    return DropdownButton<ContentType>(
-      focusColor: Colors.white,
-      value: reqestModel.requestBodyContentType,
-      icon: const Icon(
-        Icons.unfold_more_rounded,
-        size: 16,
-      ),
-      elevation: 4,
-      underline: Container(
-        height: 0,
-        //color: Colors.deepPurpleAccent,
-      ),
-      onChanged: (ContentType? value) {
-        ref
-            .read(collectionStateNotifierProvider.notifier)
-            .update(activeId!, requestBodyContentType: value);
-      },
-      borderRadius: BorderRadius.circular(10),
-      items: ContentType.values
-          .map<DropdownMenuItem<ContentType>>((ContentType value) {
-        return DropdownMenuItem<ContentType>(
-          value: value,
-          child: Padding(
-            padding: const EdgeInsets.only(left: 8),
-            child: Text(
-              value.name,
-            ),
-          ),
-        );
-      }).toList(),
-    );
-  }
-}