mirror of
https://github.com/foss42/apidash.git
synced 2025-08-06 13:51:20 +08:00
refactor: MediaQuery as InheritedModel
This commit is contained in:
@ -106,7 +106,7 @@ class DashApp extends ConsumerWidget {
|
|||||||
final isDarkMode =
|
final isDarkMode =
|
||||||
ref.watch(settingsProvider.select((value) => value.isDark));
|
ref.watch(settingsProvider.select((value) => value.isDark));
|
||||||
final isLargeMobile =
|
final isLargeMobile =
|
||||||
MediaQuery.of(context).size.width > kMinWindowSize.width;
|
MediaQuery.sizeOf(context).width > kMinWindowSize.width;
|
||||||
return MaterialApp(
|
return MaterialApp(
|
||||||
debugShowCheckedModeBanner: false,
|
debugShowCheckedModeBanner: false,
|
||||||
theme: ThemeData(
|
theme: ThemeData(
|
||||||
|
@ -143,7 +143,7 @@ class _RequestListState extends ConsumerState<RequestList> {
|
|||||||
.select((value) => value.alwaysShowCollectionPaneScrollbar));
|
.select((value) => value.alwaysShowCollectionPaneScrollbar));
|
||||||
final filterQuery = ref.watch(searchQueryProvider).trim();
|
final filterQuery = ref.watch(searchQueryProvider).trim();
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
|
|
||||||
return Scrollbar(
|
return Scrollbar(
|
||||||
controller: controller,
|
controller: controller,
|
||||||
@ -153,7 +153,7 @@ class _RequestListState extends ConsumerState<RequestList> {
|
|||||||
? ReorderableListView.builder(
|
? ReorderableListView.builder(
|
||||||
padding: isMobile
|
padding: isMobile
|
||||||
? EdgeInsets.only(
|
? EdgeInsets.only(
|
||||||
bottom: MediaQuery.of(context).padding.bottom,
|
bottom: MediaQuery.paddingOf(context).bottom,
|
||||||
right: 8,
|
right: 8,
|
||||||
)
|
)
|
||||||
: kPe8,
|
: kPe8,
|
||||||
@ -201,7 +201,7 @@ class _RequestListState extends ConsumerState<RequestList> {
|
|||||||
: ListView(
|
: ListView(
|
||||||
padding: kIsMobile
|
padding: kIsMobile
|
||||||
? EdgeInsets.only(
|
? EdgeInsets.only(
|
||||||
bottom: MediaQuery.of(context).padding.bottom,
|
bottom: MediaQuery.paddingOf(context).bottom,
|
||||||
right: 8,
|
right: 8,
|
||||||
)
|
)
|
||||||
: kPe8,
|
: kPe8,
|
||||||
|
@ -12,7 +12,7 @@ class RequestEditor extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
return isMobile
|
return isMobile
|
||||||
? const Padding(
|
? const Padding(
|
||||||
padding: kPb10,
|
padding: kPb10,
|
||||||
|
@ -10,7 +10,7 @@ class EditorPaneRequestURLCard extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
return Card(
|
return Card(
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shape: RoundedRectangleBorder(
|
shape: RoundedRectangleBorder(
|
||||||
|
@ -44,92 +44,88 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
|
|||||||
) {
|
) {
|
||||||
final GlobalKey<InnerDrawerState> innerDrawerKey =
|
final GlobalKey<InnerDrawerState> innerDrawerKey =
|
||||||
ref.watch(mobileDrawerKeyProvider);
|
ref.watch(mobileDrawerKeyProvider);
|
||||||
|
final isLargeMobile = MediaQuery.sizeOf(context).width > kLargeMobileWidth;
|
||||||
return AnnotatedRegion<SystemUiOverlayStyle>(
|
return AnnotatedRegion<SystemUiOverlayStyle>(
|
||||||
value: FlexColorScheme.themedSystemNavigationBar(
|
value: FlexColorScheme.themedSystemNavigationBar(
|
||||||
context,
|
context,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
noAppBar: true,
|
noAppBar: true,
|
||||||
),
|
),
|
||||||
child: LayoutBuilder(
|
child: Stack(
|
||||||
builder: (context, constraints) {
|
alignment: AlignmentDirectional.bottomCenter,
|
||||||
final isLargeMobile = constraints.maxWidth > kLargeMobileWidth;
|
children: [
|
||||||
return Stack(
|
InnerDrawer(
|
||||||
alignment: AlignmentDirectional.bottomCenter,
|
key: innerDrawerKey,
|
||||||
children: [
|
swipe: true,
|
||||||
InnerDrawer(
|
swipeChild: true,
|
||||||
key: innerDrawerKey,
|
onTapClose: true,
|
||||||
swipe: true,
|
offset: isLargeMobile
|
||||||
swipeChild: true,
|
? const IDOffset.only(left: 0.1, right: 1)
|
||||||
onTapClose: true,
|
: const IDOffset.only(left: 0.7, right: 1),
|
||||||
offset: isLargeMobile
|
boxShadow: [
|
||||||
? const IDOffset.only(left: 0.1, right: 1)
|
BoxShadow(
|
||||||
: const IDOffset.only(left: 0.7, right: 1),
|
offset: const Offset(1, 0),
|
||||||
boxShadow: [
|
color: Theme.of(context).colorScheme.onInverseSurface,
|
||||||
BoxShadow(
|
blurRadius: 0,
|
||||||
offset: const Offset(1, 0),
|
),
|
||||||
color: Theme.of(context).colorScheme.onInverseSurface,
|
],
|
||||||
blurRadius: 0,
|
colorTransitionChild: Colors.transparent,
|
||||||
),
|
colorTransitionScaffold: Colors.transparent,
|
||||||
],
|
rightAnimationType: InnerDrawerAnimation.linear,
|
||||||
colorTransitionChild: Colors.transparent,
|
backgroundDecoration:
|
||||||
colorTransitionScaffold: Colors.transparent,
|
BoxDecoration(color: Theme.of(context).colorScheme.surface),
|
||||||
rightAnimationType: InnerDrawerAnimation.linear,
|
onDragUpdate: (value, direction) {
|
||||||
backgroundDecoration:
|
drawerDirection.value = direction;
|
||||||
BoxDecoration(color: Theme.of(context).colorScheme.surface),
|
if (value > 0.98 && direction == InnerDrawerDirection.start) {
|
||||||
onDragUpdate: (value, direction) {
|
dragPosition.value = 1;
|
||||||
drawerDirection.value = direction;
|
} else {
|
||||||
if (value > 0.98 && direction == InnerDrawerDirection.start) {
|
dragPosition.value = 0;
|
||||||
dragPosition.value = 1;
|
}
|
||||||
} else {
|
},
|
||||||
dragPosition.value = 0;
|
innerDrawerCallback: (isOpened) {
|
||||||
}
|
if (drawerDirection.value == InnerDrawerDirection.start) {
|
||||||
},
|
setState(() {
|
||||||
innerDrawerCallback: (isOpened) {
|
isLeftDrawerOpen = isOpened;
|
||||||
if (drawerDirection.value == InnerDrawerDirection.start) {
|
});
|
||||||
setState(() {
|
}
|
||||||
isLeftDrawerOpen = isOpened;
|
},
|
||||||
});
|
leftChild: const LeftDrawer(
|
||||||
}
|
drawerContent: CollectionPane(),
|
||||||
},
|
),
|
||||||
leftChild: const LeftDrawer(
|
rightChild: const ResponseDrawer(),
|
||||||
drawerContent: CollectionPane(),
|
scaffold: ValueListenableBuilder<double>(
|
||||||
),
|
valueListenable: dragPosition,
|
||||||
rightChild: const ResponseDrawer(),
|
builder: (context, value, child) {
|
||||||
scaffold: ValueListenableBuilder<double>(
|
return Container(
|
||||||
valueListenable: dragPosition,
|
color: calculateBackgroundColor(value),
|
||||||
builder: (context, value, child) {
|
child: child,
|
||||||
return Container(
|
);
|
||||||
color: calculateBackgroundColor(value),
|
},
|
||||||
child: child,
|
child: ClipRRect(
|
||||||
);
|
borderRadius:
|
||||||
},
|
const BorderRadius.only(topLeft: Radius.circular(8)),
|
||||||
child: ClipRRect(
|
child: SafeArea(
|
||||||
borderRadius:
|
bottom: false,
|
||||||
const BorderRadius.only(topLeft: Radius.circular(8)),
|
child: RequestsPage(
|
||||||
child: SafeArea(
|
innerDrawerKey: innerDrawerKey,
|
||||||
bottom: false,
|
|
||||||
child: RequestsPage(
|
|
||||||
innerDrawerKey: innerDrawerKey,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (!isLargeMobile)
|
),
|
||||||
AnimatedPositioned(
|
),
|
||||||
bottom: isLeftDrawerOpen
|
if (!isLargeMobile)
|
||||||
? 0
|
AnimatedPositioned(
|
||||||
: -(72 + MediaQuery.of(context).padding.bottom),
|
bottom: isLeftDrawerOpen
|
||||||
left: 0,
|
? 0
|
||||||
right: 0,
|
: -(72 + MediaQuery.paddingOf(context).bottom),
|
||||||
height: 70 + MediaQuery.of(context).padding.bottom,
|
left: 0,
|
||||||
duration: const Duration(milliseconds: 200),
|
right: 0,
|
||||||
curve: Curves.easeOut,
|
height: 70 + MediaQuery.paddingOf(context).bottom,
|
||||||
child: const BottomNavBar(),
|
duration: const Duration(milliseconds: 200),
|
||||||
),
|
curve: Curves.easeOut,
|
||||||
],
|
child: const BottomNavBar(),
|
||||||
);
|
),
|
||||||
},
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -8,9 +8,9 @@ class LeftDrawer extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final isLargeMobile = MediaQuery.of(context).size.width > kLargeMobileWidth;
|
final isLargeMobile = MediaQuery.sizeOf(context).width > kLargeMobileWidth;
|
||||||
return Container(
|
return Container(
|
||||||
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
|
padding: EdgeInsets.only(top: MediaQuery.paddingOf(context).top),
|
||||||
color: Theme.of(context).colorScheme.onInverseSurface,
|
color: Theme.of(context).colorScheme.onInverseSurface,
|
||||||
child: Drawer(
|
child: Drawer(
|
||||||
backgroundColor: Colors.transparent,
|
backgroundColor: Colors.transparent,
|
||||||
@ -19,9 +19,10 @@ class LeftDrawer extends StatelessWidget {
|
|||||||
padding: const EdgeInsets.only(right: 16),
|
padding: const EdgeInsets.only(right: 16),
|
||||||
child: Container(
|
child: Container(
|
||||||
padding: EdgeInsets.only(
|
padding: EdgeInsets.only(
|
||||||
|
left: MediaQuery.paddingOf(context).left,
|
||||||
bottom: isLargeMobile
|
bottom: isLargeMobile
|
||||||
? MediaQuery.of(context).padding.bottom
|
? MediaQuery.paddingOf(context).bottom
|
||||||
: 70 + MediaQuery.of(context).padding.bottom),
|
: 70 + MediaQuery.paddingOf(context).bottom),
|
||||||
clipBehavior: Clip.hardEdge,
|
clipBehavior: Clip.hardEdge,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Theme.of(context).colorScheme.surface,
|
color: Theme.of(context).colorScheme.surface,
|
||||||
|
@ -15,10 +15,10 @@ class BottomNavBar extends ConsumerWidget {
|
|||||||
children: [
|
children: [
|
||||||
Container(
|
Container(
|
||||||
alignment: Alignment.topCenter,
|
alignment: Alignment.topCenter,
|
||||||
height: 70 + MediaQuery.of(context).padding.bottom,
|
height: 70 + MediaQuery.paddingOf(context).bottom,
|
||||||
width: MediaQuery.of(context).size.width,
|
width: MediaQuery.sizeOf(context).width,
|
||||||
padding:
|
padding:
|
||||||
EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
|
EdgeInsets.only(bottom: MediaQuery.paddingOf(context).bottom),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
border: Border(
|
border: Border(
|
||||||
top: BorderSide(
|
top: BorderSide(
|
||||||
|
@ -17,7 +17,7 @@ class PageBase extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
body: Padding(
|
body: Padding(
|
||||||
padding: EdgeInsets.only(
|
padding: EdgeInsets.only(
|
||||||
bottom: MediaQuery.of(context).padding.bottom,
|
bottom: MediaQuery.paddingOf(context).bottom,
|
||||||
),
|
),
|
||||||
child: scaffoldBody,
|
child: scaffoldBody,
|
||||||
),
|
),
|
||||||
|
@ -130,10 +130,10 @@ class RequestPageBottombar extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return Container(
|
||||||
height: 60 + MediaQuery.of(context).padding.bottom,
|
height: 60 + MediaQuery.paddingOf(context).bottom,
|
||||||
width: MediaQuery.of(context).size.width,
|
width: MediaQuery.sizeOf(context).width,
|
||||||
padding: EdgeInsets.only(
|
padding: EdgeInsets.only(
|
||||||
bottom: MediaQuery.of(context).padding.bottom,
|
bottom: MediaQuery.paddingOf(context).bottom,
|
||||||
left: 16,
|
left: 16,
|
||||||
right: 16,
|
right: 16,
|
||||||
),
|
),
|
||||||
|
@ -24,7 +24,7 @@ class ResponseDrawer extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
body: Padding(
|
body: Padding(
|
||||||
padding: EdgeInsets.only(
|
padding: EdgeInsets.only(
|
||||||
bottom: MediaQuery.of(context).padding.bottom,
|
bottom: MediaQuery.paddingOf(context).bottom,
|
||||||
),
|
),
|
||||||
child: const ResponsePane(),
|
child: const ResponsePane(),
|
||||||
),
|
),
|
||||||
|
@ -14,7 +14,7 @@ class SettingsPage extends ConsumerWidget {
|
|||||||
final clearingData = ref.watch(clearDataStateProvider);
|
final clearingData = ref.watch(clearDataStateProvider);
|
||||||
var sm = ScaffoldMessenger.of(context);
|
var sm = ScaffoldMessenger.of(context);
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
return Column(
|
return Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
|
@ -16,7 +16,7 @@ class DropdownButtonHttpMethod extends StatelessWidget {
|
|||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final surfaceColor = Theme.of(context).colorScheme.surface;
|
final surfaceColor = Theme.of(context).colorScheme.surface;
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
return DropdownButton<HTTPVerb>(
|
return DropdownButton<HTTPVerb>(
|
||||||
focusColor: surfaceColor,
|
focusColor: surfaceColor,
|
||||||
value: method,
|
value: method,
|
||||||
|
@ -24,7 +24,7 @@ class IntroMessage extends StatelessWidget {
|
|||||||
future: introData(),
|
future: introData(),
|
||||||
builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
|
builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
|
||||||
final isMobile = kIsMobile &&
|
final isMobile = kIsMobile &&
|
||||||
MediaQuery.of(context).size.width < kMinWindowSize.width;
|
MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
if (snapshot.hasError) {
|
if (snapshot.hasError) {
|
||||||
return const ErrorMessage(message: "An error occured");
|
return const ErrorMessage(message: "An error occured");
|
||||||
}
|
}
|
||||||
|
@ -46,7 +46,7 @@ class _RequestPaneState extends State<RequestPane>
|
|||||||
_controller.index = widget.tabIndex!;
|
_controller.index = widget.tabIndex!;
|
||||||
}
|
}
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
return Column(
|
return Column(
|
||||||
children: [
|
children: [
|
||||||
isMobile
|
isMobile
|
||||||
|
@ -13,7 +13,7 @@ class TabLabel extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final isMobile =
|
final isMobile =
|
||||||
kIsMobile && MediaQuery.of(context).size.width < kMinWindowSize.width;
|
kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
height: isMobile ? kMobileTabHeight : kTabHeight,
|
height: isMobile ? kMobileTabHeight : kTabHeight,
|
||||||
child: Stack(
|
child: Stack(
|
||||||
|
Reference in New Issue
Block a user