Skip to content

Commit 6051961

Browse files
DenserMeerkatDenserMeerkat
committed
fix: migrate to native drawer
1 parent 9c4b492 commit 6051961

File tree

12 files changed

+222
-393
lines changed

12 files changed

+222
-393
lines changed

‎lib/extensions/context_extensions.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,8 @@ extension MediaQueryExtension on BuildContext {
1515

1616
bool get isExtraLargeWindow =>
1717
MediaQuery.of(this).size.width > kLargeWindowWidth;
18+
19+
double get width => MediaQuery.of(this).size.width;
20+
21+
double get height => MediaQuery.of(this).size.height;
1822
}

‎lib/providers/ui_providers.dart‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import 'package:flutter/widgets.dart';
1+
import 'package:flutter/material.dart';
22
import 'package:flutter_riverpod/flutter_riverpod.dart';
3-
import 'package:inner_drawer/inner_drawer.dart';
43

5-
final mobileDrawerKeyProvider = StateProvider<GlobalKey<InnerDrawerState>>(
6-
(ref) => GlobalKey<InnerDrawerState>());
4+
final mobileScaffoldKeyStateProvider = StateProvider<GlobalKey<ScaffoldState>>(
5+
(ref) => GlobalKey<ScaffoldState>());
76
final leftDrawerStateProvider = StateProvider<bool>((ref) => false);
87
final navRailIndexStateProvider = StateProvider<int>((ref) => 0);
98
final selectedIdEditStateProvider = StateProvider<String?>((ref) => null);

‎lib/screens/home_page/collection_pane.dart‎

Lines changed: 86 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -22,91 +22,99 @@ class CollectionPane extends ConsumerWidget {
2222
child: CircularProgressIndicator(),
2323
);
2424
}
25-
return Padding(
26-
padding: kIsMacOS ? kP24CollectionPane : kP8CollectionPane,
27-
child: Column(
28-
crossAxisAlignment: CrossAxisAlignment.stretch,
29-
children: [
30-
Padding(
31-
padding: kPe8,
32-
child: Wrap(
33-
alignment: WrapAlignment.spaceBetween,
34-
children: [
35-
TextButton.icon(
36-
onPressed: (savingData || !hasUnsavedChanges)
37-
? null
38-
: () async {
39-
overlayWidget.show(
40-
widget:
41-
const SavingOverlay(saveCompleted: false));
25+
return Drawer(
26+
shape: const ContinuousRectangleBorder(),
27+
backgroundColor: Theme.of(context).colorScheme.surface,
28+
surfaceTintColor: kColorTransparent,
29+
child: Padding(
30+
padding: !context.isMediumWindow && kIsMacOS
31+
? kP24CollectionPane
32+
: kP8CollectionPane,
33+
child: Column(
34+
crossAxisAlignment: CrossAxisAlignment.stretch,
35+
children: [
36+
Padding(
37+
padding: kPe8,
38+
child: Wrap(
39+
alignment: WrapAlignment.spaceBetween,
40+
children: [
41+
TextButton.icon(
42+
onPressed: (savingData || !hasUnsavedChanges)
43+
? null
44+
: () async {
45+
overlayWidget.show(
46+
widget:
47+
const SavingOverlay(saveCompleted: false));
4248

43-
await ref
44-
.read(collectionStateNotifierProvider.notifier)
45-
.saveData();
46-
overlayWidget.hide();
47-
overlayWidget.show(
48-
widget: const SavingOverlay(saveCompleted: true));
49-
await Future.delayed(const Duration(seconds: 1));
50-
overlayWidget.hide();
51-
},
52-
icon: const Icon(
53-
Icons.save,
54-
size: 20,
55-
),
56-
label: const Text(
57-
kLabelSave,
58-
style: kTextStyleButton,
49+
await ref
50+
.read(collectionStateNotifierProvider.notifier)
51+
.saveData();
52+
overlayWidget.hide();
53+
overlayWidget.show(
54+
widget:
55+
const SavingOverlay(saveCompleted: true));
56+
await Future.delayed(const Duration(seconds: 1));
57+
overlayWidget.hide();
58+
},
59+
icon: const Icon(
60+
Icons.save,
61+
size: 20,
62+
),
63+
label: const Text(
64+
kLabelSave,
65+
style: kTextStyleButton,
66+
),
5967
),
60-
),
61-
//const Spacer(),
62-
ElevatedButton(
63-
onPressed: () {
64-
ref.read(collectionStateNotifierProvider.notifier).add();
65-
},
66-
child: const Text(
67-
kLabelPlusNew,
68-
style: kTextStyleButton,
68+
//const Spacer(),
69+
ElevatedButton(
70+
onPressed: () {
71+
ref.read(collectionStateNotifierProvider.notifier).add();
72+
},
73+
child: const Text(
74+
kLabelPlusNew,
75+
style: kTextStyleButton,
76+
),
6977
),
70-
),
71-
],
72-
),
73-
),
74-
kVSpacer10,
75-
Container(
76-
margin: const EdgeInsets.only(right: 8),
77-
decoration: BoxDecoration(
78-
borderRadius: kBorderRadius8,
79-
border: Border.all(
80-
color: Theme.of(context).colorScheme.surfaceVariant,
78+
],
8179
),
8280
),
83-
child: Row(
84-
children: [
85-
kHSpacer5,
86-
Icon(
87-
Icons.filter_alt,
88-
size: 18,
89-
color: Theme.of(context).colorScheme.secondary,
81+
kVSpacer10,
82+
Container(
83+
margin: const EdgeInsets.only(right: 8),
84+
decoration: BoxDecoration(
85+
borderRadius: kBorderRadius8,
86+
border: Border.all(
87+
color: Theme.of(context).colorScheme.surfaceVariant,
9088
),
91-
kHSpacer5,
92-
Expanded(
93-
child: RawTextField(
94-
style: Theme.of(context).textTheme.bodyMedium,
95-
hintText: "Filter by name or URL",
96-
onChanged: (value) {
97-
ref.read(collectionSearchQueryProvider.notifier).state =
98-
value.toLowerCase();
99-
},
89+
),
90+
child: Row(
91+
children: [
92+
kHSpacer5,
93+
Icon(
94+
Icons.filter_alt,
95+
size: 18,
96+
color: Theme.of(context).colorScheme.secondary,
10097
),
101-
),
102-
],
98+
kHSpacer5,
99+
Expanded(
100+
child: RawTextField(
101+
style: Theme.of(context).textTheme.bodyMedium,
102+
hintText: "Filter by name or URL",
103+
onChanged: (value) {
104+
ref.read(collectionSearchQueryProvider.notifier).state =
105+
value.toLowerCase();
106+
},
107+
),
108+
),
109+
],
110+
),
111+
),
112+
kVSpacer10,
113+
const Expanded(
114+
child: RequestList(),
103115
),
104-
),
105-
kVSpacer10,
106-
const Expanded(
107-
child: RequestList(),
108-
),
109-
],
116+
],
117+
),
110118
),
111119
);
112120
}
@@ -240,7 +248,6 @@ class RequestItem extends ConsumerWidget {
240248
Widget build(BuildContext context, WidgetRef ref) {
241249
final selectedId = ref.watch(selectedIdStateProvider);
242250
final editRequestId = ref.watch(selectedIdEditStateProvider);
243-
final mobileDrawerKey = ref.watch(mobileDrawerKeyProvider);
244251

245252
return SidebarRequestCard(
246253
id: id,
@@ -250,7 +257,7 @@ class RequestItem extends ConsumerWidget {
250257
selectedId: selectedId,
251258
editRequestId: editRequestId,
252259
onTap: () {
253-
mobileDrawerKey.currentState?.close();
260+
ref.read(mobileScaffoldKeyStateProvider).currentState?.closeDrawer();
254261
ref.read(selectedIdStateProvider.notifier).state = id;
255262
},
256263
// onDoubleTap: () {

‎lib/screens/mobile/dashboard.dart‎

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1-
import 'package:apidash/widgets/splitviews.dart';
1+
import 'package:apidash/consts.dart';
22
import 'package:flutter/material.dart';
33
import 'package:flutter/services.dart';
44
import 'package:flutter_riverpod/flutter_riverpod.dart';
5-
import 'package:inner_drawer/inner_drawer.dart';
65
import 'package:flex_color_scheme/flex_color_scheme.dart';
76
import 'package:apidash/extensions/extensions.dart';
87
import 'package:apidash/providers/providers.dart';
98
import '../intro_page.dart';
109
import '../settings_page.dart';
1110
import 'navbar.dart';
1211
import 'requests_page.dart';
13-
import 'response_drawer.dart';
14-
import '../home_page/collection_pane.dart';
1512
import 'widgets/page_base.dart';
1613

1714
class MobileDashboard extends ConsumerStatefulWidget {
@@ -27,9 +24,8 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
2724
BuildContext context,
2825
) {
2926
final railIdx = ref.watch(navRailIndexStateProvider);
30-
final GlobalKey<InnerDrawerState> innerDrawerKey =
31-
ref.watch(mobileDrawerKeyProvider);
3227
final isLeftDrawerOpen = ref.watch(leftDrawerStateProvider);
28+
3329
return AnnotatedRegion<SystemUiOverlayStyle>(
3430
value: FlexColorScheme.themedSystemNavigationBar(
3531
context,
@@ -41,9 +37,8 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
4137
children: [
4238
PageBranch(
4339
pageIndex: railIdx,
44-
innerDrawerKey: innerDrawerKey,
4540
),
46-
if (context.isCompactWindow)
41+
if (context.isMediumWindow)
4742
AnimatedPositioned(
4843
bottom: isLeftDrawerOpen
4944
? 0
@@ -61,28 +56,32 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
6156
}
6257
}
6358

64-
class PageBranch extends StatelessWidget {
59+
class PageBranch extends ConsumerWidget {
6560
const PageBranch({
6661
super.key,
6762
required this.pageIndex,
68-
required this.innerDrawerKey,
6963
});
7064

7165
final int pageIndex;
72-
final GlobalKey<InnerDrawerState> innerDrawerKey;
73-
7466
@override
75-
Widget build(BuildContext context) {
67+
Widget build(BuildContext context, WidgetRef ref) {
68+
final scaffoldKey = ref.watch(mobileScaffoldKeyStateProvider);
7669
switch (pageIndex) {
7770
case 1:
78-
return TwoDrawerSplitView(
79-
key: const ValueKey('env'),
80-
innerDrawerKey: innerDrawerKey,
81-
offset: !context.isCompactWindow
82-
? const IDOffset.only(left: 0.1)
83-
: const IDOffset.only(left: 0.7),
84-
leftDrawerContent: const SizedBox(),
85-
mainContent: const SizedBox(),
71+
// Temporary Environment Page
72+
return Scaffold(
73+
key: scaffoldKey,
74+
appBar: AppBar(
75+
title: const Text('Environments'),
76+
),
77+
onDrawerChanged: (isOpened) {
78+
ref.read(leftDrawerStateProvider.notifier).state = isOpened;
79+
},
80+
drawer: const Drawer(
81+
surfaceTintColor: kColorTransparent,
82+
shape: ContinuousRectangleBorder(),
83+
),
84+
body: const SizedBox(),
8685
);
8786
case 2:
8887
return const PageBase(
@@ -95,17 +94,8 @@ class PageBranch extends StatelessWidget {
9594
scaffoldBody: SettingsPage(),
9695
);
9796
default:
98-
return TwoDrawerSplitView(
99-
key: const ValueKey('home'),
100-
innerDrawerKey: innerDrawerKey,
101-
offset: !context.isCompactWindow
102-
? const IDOffset.only(left: 0.1, right: 1)
103-
: const IDOffset.only(left: 0.7, right: 1),
104-
leftDrawerContent: const CollectionPane(),
105-
rightDrawerContent: const ResponseDrawer(),
106-
mainContent: RequestsPage(
107-
innerDrawerKey: innerDrawerKey,
108-
),
97+
return RequestsPage(
98+
scaffoldKey: scaffoldKey,
10999
);
110100
}
111101
}

‎lib/screens/mobile/navbar.dart‎

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -75,75 +75,6 @@ class BottomNavBar extends ConsumerWidget {
7575
}
7676
}
7777

78-
class NavRail extends ConsumerWidget {
79-
const NavRail({super.key});
80-
81-
@override
82-
Widget build(BuildContext context, WidgetRef ref) {
83-
final railIdx = ref.watch(navRailIndexStateProvider);
84-
return Material(
85-
type: MaterialType.transparency,
86-
child: Container(
87-
width: 70,
88-
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
89-
decoration: BoxDecoration(
90-
border: Border(
91-
right: BorderSide(
92-
color: Theme.of(context).colorScheme.onInverseSurface,
93-
width: 1,
94-
),
95-
),
96-
),
97-
child: Column(
98-
children: [
99-
customNavigationDestination(
100-
context,
101-
ref,
102-
railIdx,
103-
0,
104-
Icons.dashboard,
105-
Icons.dashboard_outlined,
106-
'Requests',
107-
),
108-
const SizedBox(height: 16),
109-
customNavigationDestination(
110-
context,
111-
ref,
112-
railIdx,
113-
1,
114-
Icons.laptop_windows,
115-
Icons.laptop_windows_outlined,
116-
'Variables',
117-
),
118-
const Expanded(child: SizedBox()),
119-
customNavigationDestination(
120-
context,
121-
ref,
122-
railIdx,
123-
2,
124-
Icons.help,
125-
Icons.help_outline,
126-
'About',
127-
showLabel: false,
128-
),
129-
const SizedBox(height: 24),
130-
customNavigationDestination(
131-
context,
132-
ref,
133-
railIdx,
134-
3,
135-
Icons.settings,
136-
Icons.settings_outlined,
137-
'Settings',
138-
showLabel: false,
139-
),
140-
],
141-
),
142-
),
143-
);
144-
}
145-
}
146-
14778
Widget customNavigationDestination(
14879
BuildContext context,
14980
WidgetRef ref,

0 commit comments

Comments
 (0)