From eabece72393af8427c88cc3142d22fba1222f794 Mon Sep 17 00:00:00 2001 From: Ankit Mahato Date: Fri, 21 Apr 2023 11:08:51 +0530 Subject: [PATCH] Refactor request pane --- .../request_pane/request_body.dart | 33 +---- .../request_pane/request_pane.dart | 134 +++--------------- lib/widgets/dropdowns.dart | 52 +++++++ lib/widgets/request_widgets.dart | 133 +++++++++++++++++ lib/widgets/widgets.dart | 3 +- 5 files changed, 212 insertions(+), 143 deletions(-) create mode 100644 lib/widgets/request_widgets.dart diff --git a/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart b/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart index cb634922..3e9a902b 100644 --- a/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart +++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart @@ -69,43 +69,16 @@ class _DropdownButtonBodyContentTypeState extends ConsumerState { @override Widget build(BuildContext context) { - final surfaceColor = Theme.of(context).colorScheme.surface; final activeId = ref.watch(activeIdStateProvider); final requestBodyContentType = ref.watch(activeRequestModelProvider - .select((value) => value!.requestBodyContentType)); - return DropdownButton( - focusColor: surfaceColor, - value: requestBodyContentType, - icon: const Icon( - Icons.unfold_more_rounded, - size: 16, - ), - elevation: 4, - style: kCodeStyle.copyWith( - color: Theme.of(context).colorScheme.primary, - ), - underline: Container( - height: 0, - ), + .select((value) => value?.requestBodyContentType)); + return DropdownButtonContentType( + contentType: requestBodyContentType, onChanged: (ContentType? value) { ref .read(collectionStateNotifierProvider.notifier) .update(activeId!, requestBodyContentType: value); }, - borderRadius: kBorderRadius12, - items: ContentType.values - .map>((ContentType value) { - return DropdownMenuItem( - value: value, - child: Padding( - padding: kPs8, - child: Text( - value.name, - style: kTextStyleButton, - ), - ), - ); - }).toList(), ); } } diff --git a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart index 8e81e327..3acea895 100644 --- a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart +++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.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/consts.dart'; +import 'package:apidash/widgets/widgets.dart'; import 'request_headers.dart'; import 'request_params.dart'; import 'request_body.dart'; @@ -13,125 +13,35 @@ class EditRequestPane extends ConsumerStatefulWidget { ConsumerState createState() => _EditRequestPaneState(); } -class _EditRequestPaneState extends ConsumerState - with TickerProviderStateMixin { - late final TabController _controller; - - @override - void initState() { - super.initState(); - _controller = TabController( - length: 3, - animationDuration: kTabAnimationDuration, - vsync: this, - ); - } - +class _EditRequestPaneState extends ConsumerState { @override Widget build(BuildContext context) { final activeId = ref.watch(activeIdStateProvider); final codePaneVisible = ref.watch(codePaneVisibleStateProvider); - _controller.index = ref + var index = ref .read(collectionStateNotifierProvider.notifier) .getRequestModel(activeId!) .requestTabIndex; - return Column( - children: [ - Padding( - padding: kPh20v10, - child: SizedBox( - height: kHeaderHeight, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Request", - style: Theme.of(context).textTheme.titleMedium, - ), - FilledButton.tonalIcon( - onPressed: () { - ref - .read(codePaneVisibleStateProvider.notifier) - .update((state) => !codePaneVisible); - }, - icon: Icon( - codePaneVisible - ? Icons.code_off_rounded - : Icons.code_rounded, - ), - label: SizedBox( - width: 75, - child: Text(codePaneVisible ? "Hide Code" : "View Code"), - ), - ), - ], - ), - ), - ), - TabBar( - key: Key(activeId), - controller: _controller, - overlayColor: kColorTransparentState, - onTap: (index) { - ref - .read(collectionStateNotifierProvider.notifier) - .update(activeId, requestTabIndex: _controller.index); - }, - tabs: const [ - SizedBox( - height: kTabHeight, - child: Center( - child: Text( - 'URL Params', - textAlign: TextAlign.center, - overflow: TextOverflow.fade, - softWrap: false, - style: kTextStyleButton, - ), - ), - ), - SizedBox( - height: kTabHeight, - child: Center( - child: Text( - 'Headers', - textAlign: TextAlign.center, - overflow: TextOverflow.fade, - style: kTextStyleButton, - ), - ), - ), - SizedBox( - height: kTabHeight, - child: Center( - child: Text( - 'Body', - textAlign: TextAlign.center, - overflow: TextOverflow.fade, - style: kTextStyleButton, - ), - ), - ), - ], - ), - Expanded( - child: TabBarView( - controller: _controller, - physics: const NeverScrollableScrollPhysics(), - children: const [ - EditRequestURLParams(), - EditRequestHeaders(), - EditRequestBody(), - ], - ), - ), + + return RequestPane( + activeId: activeId, + codePaneVisible: codePaneVisible, + tabIndex: index, + onPressedCodeButton: () { + ref + .read(codePaneVisibleStateProvider.notifier) + .update((state) => !codePaneVisible); + }, + onTapTabBar: (index) { + ref + .read(collectionStateNotifierProvider.notifier) + .update(activeId, requestTabIndex: index); + }, + children: const [ + EditRequestURLParams(), + EditRequestHeaders(), + EditRequestBody(), ], ); } - - @override - void dispose() { - _controller.dispose(); - super.dispose(); - } } diff --git a/lib/widgets/dropdowns.dart b/lib/widgets/dropdowns.dart index 228a269f..92c7dcfb 100644 --- a/lib/widgets/dropdowns.dart +++ b/lib/widgets/dropdowns.dart @@ -57,3 +57,55 @@ class _DropdownButtonHttpMethodState extends State { ); } } + +class DropdownButtonContentType extends StatefulWidget { + const DropdownButtonContentType({ + super.key, + this.contentType, + this.onChanged, + }); + + final ContentType? contentType; + final void Function(ContentType?)? onChanged; + + @override + State createState() => + _DropdownButtonContentTypeState(); +} + +class _DropdownButtonContentTypeState extends State { + @override + Widget build(BuildContext context) { + final surfaceColor = Theme.of(context).colorScheme.surface; + return DropdownButton( + focusColor: surfaceColor, + value: widget.contentType, + icon: const Icon( + Icons.unfold_more_rounded, + size: 16, + ), + elevation: 4, + style: kCodeStyle.copyWith( + color: Theme.of(context).colorScheme.primary, + ), + underline: Container( + height: 0, + ), + onChanged: widget.onChanged, + borderRadius: kBorderRadius12, + items: ContentType.values + .map>((ContentType value) { + return DropdownMenuItem( + value: value, + child: Padding( + padding: kPs8, + child: Text( + value.name, + style: kTextStyleButton, + ), + ), + ); + }).toList(), + ); + } +} diff --git a/lib/widgets/request_widgets.dart b/lib/widgets/request_widgets.dart new file mode 100644 index 00000000..264de0a9 --- /dev/null +++ b/lib/widgets/request_widgets.dart @@ -0,0 +1,133 @@ +import 'package:flutter/material.dart'; +import 'package:apidash/consts.dart'; + +class RequestPane extends StatefulWidget { + const RequestPane({ + super.key, + required this.activeId, + required this.codePaneVisible, + this.tabIndex, + this.onPressedCodeButton, + this.onTapTabBar, + required this.children, + }); + + final String? activeId; + final bool codePaneVisible; + final int? tabIndex; + final void Function()? onPressedCodeButton; + final void Function(int)? onTapTabBar; + final List children; + + @override + State createState() => _RequestPaneState(); +} + +class _RequestPaneState extends State + with TickerProviderStateMixin { + late final TabController _controller; + + @override + void initState() { + super.initState(); + _controller = TabController( + length: 3, + animationDuration: kTabAnimationDuration, + vsync: this, + ); + } + + @override + Widget build(BuildContext context) { + if (widget.tabIndex != null) { + _controller.index = widget.tabIndex!; + } + return Column( + children: [ + Padding( + padding: kPh20v10, + child: SizedBox( + height: kHeaderHeight, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Request", + style: Theme.of(context).textTheme.titleMedium, + ), + FilledButton.tonalIcon( + onPressed: widget.onPressedCodeButton, + icon: Icon( + widget.codePaneVisible + ? Icons.code_off_rounded + : Icons.code_rounded, + ), + label: SizedBox( + width: 75, + child: Text( + widget.codePaneVisible ? "Hide Code" : "View Code"), + ), + ), + ], + ), + ), + ), + TabBar( + key: Key(widget.activeId!), + controller: _controller, + overlayColor: kColorTransparentState, + onTap: widget.onTapTabBar, + tabs: const [ + SizedBox( + height: kTabHeight, + child: Center( + child: Text( + 'URL Params', + textAlign: TextAlign.center, + overflow: TextOverflow.fade, + softWrap: false, + style: kTextStyleButton, + ), + ), + ), + SizedBox( + height: kTabHeight, + child: Center( + child: Text( + 'Headers', + textAlign: TextAlign.center, + overflow: TextOverflow.fade, + style: kTextStyleButton, + ), + ), + ), + SizedBox( + height: kTabHeight, + child: Center( + child: Text( + 'Body', + textAlign: TextAlign.center, + overflow: TextOverflow.fade, + style: kTextStyleButton, + ), + ), + ), + ], + ), + Expanded( + child: TabBarView( + controller: _controller, + physics: const NeverScrollableScrollPhysics(), + children: widget.children, + ), + ), + ], + ); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } +} diff --git a/lib/widgets/widgets.dart b/lib/widgets/widgets.dart index a7061a56..edda525a 100644 --- a/lib/widgets/widgets.dart +++ b/lib/widgets/widgets.dart @@ -5,7 +5,6 @@ export 'previewer.dart'; export 'code_previewer.dart'; export 'codegen_previewer.dart'; export 'error_message.dart'; -export 'response_widgets.dart'; export 'dropdowns.dart'; export 'splitviews.dart'; export 'texts.dart'; @@ -13,3 +12,5 @@ export 'textfields.dart'; export 'menus.dart'; export 'cards.dart'; export 'intro_message.dart'; +export 'request_widgets.dart'; +export 'response_widgets.dart';