refactor: MediaQuery as InheritedModel

This commit is contained in:
DenserMeerkat
2024-05-23 23:37:56 +05:30
parent 5ef37914b3
commit 5a8150953e
15 changed files with 97 additions and 100 deletions

View File

@ -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(

View File

@ -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,

View File

@ -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,

View File

@ -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(

View File

@ -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(),
); ),
}, ],
), ),
); );
} }

View File

@ -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,

View File

@ -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(

View File

@ -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,
), ),

View File

@ -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,
), ),

View File

@ -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(),
), ),

View File

@ -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: [

View File

@ -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,

View File

@ -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");
} }

View File

@ -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

View File

@ -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(