feat: refactor code highlighting and add scripts editor pane

- replace `flutter_highlighter` and `highlighter` with `flutter_highlight` and `highlight`.
- add `flutter_code_editor` dependency.
- introduce a new scripts editor pane in the REST request view.
This commit is contained in:
Udhay-Adithya
2025-04-22 14:34:43 +05:30
parent ef3867ef43
commit 346e4c3ef0
8 changed files with 182 additions and 15 deletions

View File

@@ -1,4 +1,5 @@
import 'package:apidash/consts.dart';
import 'package:apidash/screens/home_page/editor_pane/details_card/request_pane/scripts_code_pane.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:apidash/providers/providers.dart';
@@ -56,7 +57,7 @@ class EditRestRequestPane extends ConsumerWidget {
EditRequestURLParams(),
EditRequestHeaders(),
EditRequestBody(),
SizedBox.shrink(),
ScriptsCodePane(),
],
);
}

View File

@@ -0,0 +1,81 @@
import 'package:apidash/widgets/scripts_editor_pane.dart';
import 'package:flutter/material.dart';
import 'package:flutter_code_editor/flutter_code_editor.dart';
import 'package:highlight/languages/javascript.dart';
class ScriptsCodePane extends StatefulWidget {
const ScriptsCodePane({super.key});
@override
State<ScriptsCodePane> createState() => _ScriptsCodePaneState();
}
class _ScriptsCodePaneState extends State<ScriptsCodePane> {
int _selectedTabIndex = 0;
final preReqCodeController = CodeController(
text: '// Use javascript to modify this request dynamically',
language: javascript,
);
final postResCodeController = CodeController(
text: '...',
language: javascript,
);
@override
Widget build(BuildContext context) {
final tabs = ["Pre-Req", "Post-Res"];
final content = [
ScriptsEditorPane(
controller: preReqCodeController,
),
ScriptsEditorPane(
controller: postResCodeController,
),
];
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (int i = 0; i < tabs.length; i++)
ListTile(
dense: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2),
),
selectedTileColor: _selectedTabIndex == i
? Theme.of(context).colorScheme.secondaryFixed
: Theme.of(context).colorScheme.surface,
title: Text(
tabs[i],
style: TextStyle(
fontSize: 12,
),
),
selected: _selectedTabIndex == i,
onTap: () {
setState(() {
_selectedTabIndex = i;
});
},
),
],
),
),
const VerticalDivider(width: 1),
Expanded(
child: Container(
color: Theme.of(context).colorScheme.surfaceContainerLowest,
child: content[_selectedTabIndex],
),
),
],
);
}
}