fix: migrate to native drawer

lib/extensions/context_extensions.dart

@@ -15,4 +15,8 @@ extension MediaQueryExtension on BuildContext {
 
   bool get isExtraLargeWindow =>
       MediaQuery.of(this).size.width > kLargeWindowWidth;
+
+  double get width => MediaQuery.of(this).size.width;
+
+  double get height => MediaQuery.of(this).size.height;
 }

lib/providers/ui_providers.dart

@@ -1,9 +1,8 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 
-final mobileDrawerKeyProvider = StateProvider<GlobalKey<InnerDrawerState>>(
+final mobileScaffoldKeyStateProvider = StateProvider<GlobalKey<ScaffoldState>>(
-    (ref) => GlobalKey<InnerDrawerState>());
+    (ref) => GlobalKey<ScaffoldState>());
 final leftDrawerStateProvider = StateProvider<bool>((ref) => false);
 final navRailIndexStateProvider = StateProvider<int>((ref) => 0);
 final selectedIdEditStateProvider = StateProvider<String?>((ref) => null);

lib/screens/envvar/environments_pane.dart

@@ -153,7 +153,6 @@ class EnvironmentItem extends ConsumerWidget {
     final selectedId = ref.watch(selectedEnvironmentIdStateProvider);
     final activeEnvironmentId = ref.watch(activeEnvironmentIdStateProvider);
     final editRequestId = ref.watch(selectedIdEditStateProvider);
-    final mobileDrawerKey = ref.watch(mobileDrawerKeyProvider);
 
     return SidebarEnvironmentCard(
       id: id,
@@ -166,7 +165,7 @@ class EnvironmentItem extends ConsumerWidget {
         ref.read(activeEnvironmentIdStateProvider.notifier).state = id;
       },
       onTap: () {
-        mobileDrawerKey.currentState?.close();
+        ref.read(mobileScaffoldKeyStateProvider).currentState?.closeDrawer();
         ref.read(selectedEnvironmentIdStateProvider.notifier).state = id;
       },
       focusNode: ref.watch(nameTextFieldFocusNodeProvider),

lib/screens/home_page/collection_pane.dart

@@ -250,7 +250,6 @@ class RequestItem extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final selectedId = ref.watch(selectedIdStateProvider);
     final editRequestId = ref.watch(selectedIdEditStateProvider);
-    final mobileDrawerKey = ref.watch(mobileDrawerKeyProvider);
 
     return SidebarRequestCard(
       id: id,
@@ -260,7 +259,7 @@ class RequestItem extends ConsumerWidget {
       selectedId: selectedId,
       editRequestId: editRequestId,
       onTap: () {
-        mobileDrawerKey.currentState?.close();
+        ref.read(mobileScaffoldKeyStateProvider).currentState?.closeDrawer();
         ref.read(selectedIdStateProvider.notifier).state = id;
       },
       // onDoubleTap: () {

lib/screens/mobile/dashboard.dart

@@ -1,9 +1,7 @@
-import 'package:apidash/screens/envvar/environments_pane.dart';
+import 'package:apidash/consts.dart';
-import 'package:apidash/widgets/splitviews.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:apidash/extensions/extensions.dart';
 import 'package:apidash/providers/providers.dart';
@@ -11,8 +9,6 @@ import '../intro_page.dart';
 import '../settings_page.dart';
 import 'navbar.dart';
 import 'requests_page.dart';
-import 'response_drawer.dart';
-import '../home_page/collection_pane.dart';
 import 'widgets/page_base.dart';
 
 class MobileDashboard extends ConsumerStatefulWidget {
@@ -28,9 +24,8 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
     BuildContext context,
   ) {
     final railIdx = ref.watch(navRailIndexStateProvider);
-    final GlobalKey<InnerDrawerState> innerDrawerKey =
-        ref.watch(mobileDrawerKeyProvider);
     final isLeftDrawerOpen = ref.watch(leftDrawerStateProvider);
+
     return AnnotatedRegion<SystemUiOverlayStyle>(
       value: FlexColorScheme.themedSystemNavigationBar(
         context,
@@ -42,9 +37,8 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
         children: [
           PageBranch(
             pageIndex: railIdx,
-            innerDrawerKey: innerDrawerKey,
           ),
-          if (context.isCompactWindow)
+          if (context.isMediumWindow)
             AnimatedPositioned(
               bottom: isLeftDrawerOpen
                   ? 0
@@ -62,28 +56,32 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
   }
 }
 
-class PageBranch extends StatelessWidget {
+class PageBranch extends ConsumerWidget {
   const PageBranch({
     super.key,
     required this.pageIndex,
-    required this.innerDrawerKey,
   });
 
   final int pageIndex;
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
-
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final scaffoldKey = ref.watch(mobileScaffoldKeyStateProvider);
     switch (pageIndex) {
       case 1:
-        return TwoDrawerSplitView(
+        // Temporary Environment Page
-          key: const ValueKey('env'),
+        return Scaffold(
-          innerDrawerKey: innerDrawerKey,
+          key: scaffoldKey,
-          offset: !context.isCompactWindow
+          appBar: AppBar(
-              ? const IDOffset.only(left: 0.1)
+            title: const Text('Environments'),
-              : const IDOffset.only(left: 0.7),
+          ),
-          leftDrawerContent: const EnvironmentsPane(),
+          onDrawerChanged: (isOpened) {
-          mainContent: const SizedBox(),
+            ref.read(leftDrawerStateProvider.notifier).state = isOpened;
+          },
+          drawer: const Drawer(
+            surfaceTintColor: kColorTransparent,
+            shape: ContinuousRectangleBorder(),
+          ),
+          body: const SizedBox(),
         );
       case 2:
         return const PageBase(
@@ -96,17 +94,8 @@ class PageBranch extends StatelessWidget {
           scaffoldBody: SettingsPage(),
         );
       default:
-        return TwoDrawerSplitView(
+        return RequestsPage(
-          key: const ValueKey('home'),
+          scaffoldKey: scaffoldKey,
-          innerDrawerKey: innerDrawerKey,
-          offset: !context.isCompactWindow
-              ? const IDOffset.only(left: 0.1, right: 1)
-              : const IDOffset.only(left: 0.7, right: 1),
-          leftDrawerContent: const CollectionPane(),
-          rightDrawerContent: const ResponseDrawer(),
-          mainContent: RequestsPage(
-            innerDrawerKey: innerDrawerKey,
-          ),
         );
     }
   }

lib/screens/mobile/navbar.dart

@@ -75,76 +75,6 @@ class BottomNavBar extends ConsumerWidget {
   }
 }
 
-class NavRail extends ConsumerWidget {
-  const NavRail({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final railIdx = ref.watch(navRailIndexStateProvider);
-    return Material(
-      type: MaterialType.transparency,
-      child: Ink(
-        width: 70,
-        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
-          border: Border(
-            right: BorderSide(
-              color: Theme.of(context).colorScheme.onInverseSurface,
-              width: 1,
-            ),
-          ),
-        ),
-        child: Column(
-          children: [
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              0,
-              Icons.dashboard,
-              Icons.dashboard_outlined,
-              'Requests',
-            ),
-            const SizedBox(height: 16),
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              1,
-              Icons.laptop_windows,
-              Icons.laptop_windows_outlined,
-              'Variables',
-            ),
-            const Expanded(child: SizedBox()),
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              2,
-              Icons.help,
-              Icons.help_outline,
-              'About',
-              showLabel: false,
-            ),
-            const SizedBox(height: 24),
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              3,
-              Icons.settings,
-              Icons.settings_outlined,
-              'Settings',
-              showLabel: false,
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
 Widget customNavigationDestination(
   BuildContext context,
   WidgetRef ref,

lib/screens/mobile/requests_page.dart

@@ -1,58 +1,36 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 import 'package:apidash/providers/providers.dart';
 import 'package:apidash/utils/http_utils.dart';
 import 'package:apidash/consts.dart';
 import 'package:apidash/widgets/widgets.dart';
+import '../home_page/collection_pane.dart';
 import '../home_page/editor_pane/editor_request.dart';
 import '../home_page/editor_pane/editor_pane.dart';
 import '../home_page/editor_pane/url_card.dart';
 import '../home_page/editor_pane/details_card/code_pane.dart';
+import 'response_drawer.dart';
 import 'widgets/page_base.dart';
 
-class RequestsPage extends StatelessWidget {
+class RequestsPage extends ConsumerWidget {
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
+  const RequestsPage({
+    super.key,
+    required this.scaffoldKey,
+  });
 
-  const RequestsPage({super.key, required this.innerDrawerKey});
+  final GlobalKey<ScaffoldState> scaffoldKey;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
+    return TwoDrawerScaffold(
-      backgroundColor: Colors.transparent,
+      scaffoldKey: scaffoldKey,
-      appBar: AppBar(
-        backgroundColor: Theme.of(context).colorScheme.surface,
-        scrolledUnderElevation: 0,
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.only(topLeft: Radius.circular(8)),
-        ),
-        leading: IconButton(
-          icon: const Icon(Icons.format_list_bulleted_rounded),
-          onPressed: () {
-            innerDrawerKey.currentState!
-                .open(direction: InnerDrawerDirection.start);
-          },
-        ),
       title: const RequestTitle(),
-        titleSpacing: 0,
+      leftDrawerContent: const CollectionPane(),
-        actions: [
+      rightDrawerContent: const ResponseDrawer(),
-          IconButton(
+      mainContent: const RequestEditorPane(),
-            icon: Icon(
+      bottomNavigationBar: const RequestPageBottombar(),
-              Icons.quickreply_outlined,
+      onDrawerChanged: (value) =>
-              color: Theme.of(context).colorScheme.onBackground,
+          ref.read(leftDrawerStateProvider.notifier).state = value,
-            ),
-            onPressed: () {
-              innerDrawerKey.currentState!
-                  .open(direction: InnerDrawerDirection.end);
-            },
-          ),
-        ],
-      ),
-      body: Container(
-        color: Theme.of(context).colorScheme.surface,
-        child: const RequestEditorPane(),
-      ),
-      bottomNavigationBar: RequestPageBottombar(innerDrawerKey: innerDrawerKey),
     );
   }
 }
@@ -118,16 +96,13 @@ class RequestTitle extends ConsumerWidget {
   }
 }
 
-class RequestPageBottombar extends StatelessWidget {
+class RequestPageBottombar extends ConsumerWidget {
   const RequestPageBottombar({
     super.key,
-    required this.innerDrawerKey,
   });
 
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
-
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     return Container(
       height: 60 + MediaQuery.paddingOf(context).bottom,
       width: MediaQuery.sizeOf(context).width,
@@ -168,8 +143,10 @@ class RequestPageBottombar extends StatelessWidget {
           ),
           SendButton(
             onTap: () {
-              innerDrawerKey.currentState!
+              ref
-                  .open(direction: InnerDrawerDirection.end);
+                  .read(mobileScaffoldKeyStateProvider)
+                  .currentState!
+                  .openEndDrawer();
             },
           ),
         ],

lib/screens/mobile/response_drawer.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:apidash/consts.dart';
 import '../home_page/editor_pane/details_card/response_pane.dart';
 
 class ResponseDrawer extends StatelessWidget {
@@ -7,10 +6,7 @@ class ResponseDrawer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Scaffold(
-      padding: kIsWindows || kIsMacOS ? kPt28 : EdgeInsets.zero,
-      color: Theme.of(context).colorScheme.surface,
-      child: Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.surface,
         shape: const RoundedRectangleBorder(
@@ -32,7 +28,6 @@ class ResponseDrawer extends StatelessWidget {
         ),
         child: const ResponsePane(),
       ),
-      ),
     );
   }
 }

lib/screens/mobile/widgets/left_drawer.dart

@@ -1,46 +0,0 @@
-import 'package:apidash/consts.dart';
-import 'package:apidash/extensions/extensions.dart';
-import 'package:apidash/screens/mobile/navbar.dart';
-import 'package:flutter/material.dart';
-
-class LeftDrawer extends StatelessWidget {
-  final Widget drawerContent;
-  const LeftDrawer({super.key, required this.drawerContent});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.only(top: MediaQuery.paddingOf(context).top) +
-          (kIsWindows || kIsMacOS ? kPt28 : EdgeInsets.zero),
-      color: Theme.of(context).colorScheme.onInverseSurface,
-      child: Drawer(
-        backgroundColor: Colors.transparent,
-        surfaceTintColor: Colors.transparent,
-        child: Padding(
-          padding: const EdgeInsets.only(right: 16),
-          child: Container(
-            padding: EdgeInsets.only(
-                left: MediaQuery.paddingOf(context).left,
-                bottom: !context.isCompactWindow
-                    ? MediaQuery.paddingOf(context).bottom
-                    : 70 + MediaQuery.paddingOf(context).bottom),
-            clipBehavior: Clip.hardEdge,
-            decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surface,
-              borderRadius:
-                  const BorderRadius.only(topRight: Radius.circular(8)),
-            ),
-            child: !context.isCompactWindow
-                ? Row(
-                    children: [
-                      const NavRail(),
-                      Expanded(child: drawerContent),
-                    ],
-                  )
-                : drawerContent,
-          ),
-        ),
-      ),
-    );
-  }
-}

lib/screens/mobile/widgets/page_base.dart

@@ -4,7 +4,6 @@ import 'package:apidash/consts.dart';
 import 'package:apidash/extensions/extensions.dart';
 import 'package:apidash/providers/providers.dart';
 import 'package:apidash/widgets/window_caption.dart';
-import '../navbar.dart';
 
 class PageBase extends ConsumerWidget {
   final String title;
@@ -15,19 +14,14 @@ class PageBase extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final isDarkMode =
         ref.watch(settingsProvider.select((value) => value.isDark));
-    final scaffold = Container(
+    final scaffold = Scaffold(
-      padding: (context.isCompactWindow
-              ? const EdgeInsets.only(bottom: 70)
-              : EdgeInsets.zero) +
-          (kIsWindows || kIsMacOS ? kPt28 : EdgeInsets.zero),
-      color: Theme.of(context).colorScheme.surface,
-      child: Scaffold(
       backgroundColor: Theme.of(context).colorScheme.background,
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.background,
         primary: true,
         title: Text(title),
         centerTitle: true,
+        scrolledUnderElevation: 0,
       ),
       body: Padding(
         padding: EdgeInsets.only(
@@ -35,12 +29,13 @@ class PageBase extends ConsumerWidget {
         ),
         child: scaffoldBody,
       ),
-      ),
     );
     return Stack(
       children: [
         Container(
-          padding: (context.isMediumWindow ? kPb70 : EdgeInsets.zero) +
+          padding: (context.isMediumWindow
+                  ? const EdgeInsets.only(bottom: 70)
+                  : EdgeInsets.zero) +
               (kIsWindows || kIsMacOS ? kPt28 : EdgeInsets.zero),
           color: Theme.of(context).colorScheme.surface,
           child: scaffold,

lib/widgets/splitviews.dart

@@ -1,11 +1,7 @@
-import 'package:apidash/screens/mobile/widgets/left_drawer.dart';
 import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 import 'package:multi_split_view/multi_split_view.dart';
+import 'package:apidash/extensions/extensions.dart';
 import 'package:apidash/consts.dart';
-import 'package:apidash/providers/ui_providers.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
 
 class DashboardSplitView extends StatefulWidget {
   const DashboardSplitView({
@@ -116,83 +112,77 @@ class _EqualSplitViewState extends State<EqualSplitView> {
   }
 }
 
-class TwoDrawerSplitView extends HookConsumerWidget {
+class TwoDrawerScaffold extends StatelessWidget {
-  const TwoDrawerSplitView({
+  const TwoDrawerScaffold({
     super.key,
-    required this.innerDrawerKey,
+    required this.scaffoldKey,
-    required this.offset,
     required this.mainContent,
-    required this.leftDrawerContent,
+    required this.title,
+    this.actions,
+    this.leftDrawerContent,
     this.rightDrawerContent,
+    this.rightDrawerIcon,
+    this.bottomNavigationBar,
+    this.onDrawerChanged,
+    this.onEndDrawerChanged,
   });
 
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
+  final GlobalKey<ScaffoldState> scaffoldKey;
-  final IDOffset offset;
   final Widget mainContent;
-  final Widget leftDrawerContent;
+  final Widget title;
+  final List<Widget>? actions;
+  final Widget? leftDrawerContent;
   final Widget? rightDrawerContent;
+  final IconData? rightDrawerIcon;
+  final Widget? bottomNavigationBar;
+  final ValueChanged<bool>? onDrawerChanged;
+  final ValueChanged<bool>? onEndDrawerChanged;
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
-    ValueNotifier<double> dragPosition = useState(0.0);
-    ValueNotifier<InnerDrawerDirection?> drawerDirection =
-        ValueNotifier(InnerDrawerDirection.start);
-
-    Color calculateBackgroundColor(double dragPosition) {
-      Color start = Theme.of(context).colorScheme.surface;
-      Color end = Theme.of(context).colorScheme.onInverseSurface;
-      return dragPosition == 0 ? start : end;
-    }
-
-    return InnerDrawer(
-      key: innerDrawerKey,
-      swipe: true,
-      swipeChild: true,
-      onTapClose: true,
-      offset: offset,
-      boxShadow: [
-        BoxShadow(
-          offset: const Offset(1, 0),
-          color: Theme.of(context).colorScheme.onInverseSurface,
-          blurRadius: 0,
-        ),
-      ],
-      colorTransitionChild: Colors.transparent,
-      colorTransitionScaffold: Colors.transparent,
-      rightAnimationType: InnerDrawerAnimation.linear,
-      backgroundDecoration:
-          BoxDecoration(color: Theme.of(context).colorScheme.onInverseSurface),
-      onDragUpdate: (value, direction) {
-        drawerDirection.value = direction;
-        if (value > 0.98 && direction == InnerDrawerDirection.start) {
-          dragPosition.value = 1;
-        } else {
-          dragPosition.value = 0;
-        }
-      },
-      innerDrawerCallback: (isOpened) {
-        if (drawerDirection.value == InnerDrawerDirection.start) {
-          ref.read(leftDrawerStateProvider.notifier).state = isOpened;
-        }
-      },
-      leftChild: LeftDrawer(drawerContent: leftDrawerContent),
-      rightChild: rightDrawerContent,
-      scaffold: ValueListenableBuilder<double>(
-        valueListenable: dragPosition,
-        builder: (context, value, child) {
     return Container(
-            color: calculateBackgroundColor(value),
+      padding: (kIsWindows || kIsMacOS) ? kPt28 : EdgeInsets.zero,
-            child: child,
+      color: Theme.of(context).colorScheme.surface,
-          );
+      child: Scaffold(
+        key: scaffoldKey,
+        backgroundColor: Theme.of(context).colorScheme.surface,
+        onDrawerChanged: onDrawerChanged,
+        onEndDrawerChanged: onEndDrawerChanged,
+        drawerEdgeDragWidth: context.width,
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.surface,
+          scrolledUnderElevation: 0,
+          shape: const ContinuousRectangleBorder(),
+          leading: IconButton(
+            icon: const Icon(Icons.format_list_bulleted_rounded),
+            onPressed: () {
+              scaffoldKey.currentState!.openDrawer();
             },
-        child: ClipRRect(
-          borderRadius: const BorderRadius.only(topLeft: Radius.circular(8)),
-          child: SafeArea(
-            minimum: kIsWindows || kIsMacOS ? kPt28 : EdgeInsets.zero,
-            bottom: false,
-            child: mainContent,
           ),
+          title: title,
+          titleSpacing: 0,
+          actions: [
+            ...actions ?? [],
+            (rightDrawerContent != null
+                ? Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: IconButton(
+                      icon: Icon(
+                        rightDrawerIcon ?? Icons.arrow_forward,
+                        color: Theme.of(context).colorScheme.onBackground,
                       ),
+                      onPressed: () {
+                        scaffoldKey.currentState!.openEndDrawer();
+                      },
+                    ),
+                  )
+                : const SizedBox.shrink()),
+          ],
+        ),
+        drawer: leftDrawerContent,
+        endDrawer: rightDrawerContent,
+        body: mainContent,
+        bottomNavigationBar: bottomNavigationBar,
       ),
     );
   }

pubspec.lock

@@ -640,14 +640,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.2.0"
-  inner_drawer:
-    dependency: "direct main"
-    description:
-      name: inner_drawer
-      sha256: "19df8813ccb6aa1b6db76f2f976c93befbbae67452d019f5267209b15deb0772"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.0+1"
   io:
     dependency: transitive
     description:

pubspec.yaml

@@ -57,7 +57,6 @@ dependencies:
   dart_style: ^2.3.6
   json_text_field: ^1.1.0
   csv: ^6.0.0
-  inner_drawer: ^1.0.0+1
   flex_color_scheme: ^7.3.1
   data_table_2: ^2.5.11
   file_selector: ^1.0.3