gabehf/Fladder
1
0
Fork 0
mirror of https://github.com/gabehf/Fladder.git synced 2026-03-14 09:46:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feature: Rework responsive layout (#217)

Browse source 
Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
This commit is contained in:
PartyDonut 2025-02-07 15:55:01 +01:00 • committed by GitHub
parent e07f280124
commit 8012fdcea8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 1468 additions and 1040 deletions
Download patch file Download diff file Expand all files Collapse all files

76
lib/widgets/navigation_scaffold/components/navigation_body.dart
View file

@ -1,12 +1,15 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:auto_route/auto_route.dart';
import 'package:collection/collection.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/settings/home_settings_model.dart';
import 'package:fladder/providers/settings/client_settings_provider.dart';
import 'package:fladder/providers/views_provider.dart';
import 'package:fladder/routes/auto_router.dart';
import 'package:fladder/routes/auto_router.gr.dart';
import 'package:fladder/screens/shared/animated_fade_size.dart';
import 'package:fladder/util/adaptive_layout.dart';
@ -50,6 +53,8 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
@override
Widget build(BuildContext context) {
final views = ref.watch(viewsProvider.select((value) => value.views));
final hasOverlay = AdaptiveLayout.layoutModeOf(context) == LayoutMode.dual ||
homeRoutes.any((element) => element.name.contains(context.router.current.name));
ref.listen(
clientSettingsProvider,
(previous, next) {
@ -62,48 +67,66 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
);
return switch (AdaptiveLayout.layoutOf(context)) {
LayoutState.phone => MediaQuery.removePadding(
ViewSize.phone => MediaQuery.removePadding(
context: widget.parentContext,
child: widget.child,
),
LayoutState.tablet => Row(
ViewSize.tablet => Row(
children: [
navigationRail(context),
AnimatedFadeSize(
duration: const Duration(milliseconds: 250),
child: hasOverlay ? navigationRail(context) : const SizedBox(),
),
Flexible(
child: widget.child,
child: MediaQuery(
data: semiNestedPadding(context, hasOverlay),
child: widget.child,
),
)
],
),
LayoutState.desktop => Row(
ViewSize.desktop => Row(
children: [
AnimatedFadeSize(
duration: const Duration(milliseconds: 125),
child: expandedSideBar
? MediaQuery.removePadding(
context: widget.parentContext,
child: NestedNavigationDrawer(
isExpanded: expandedSideBar,
actionButton: actionButton(),
toggleExpanded: (value) {
setState(() {
expandedSideBar = value;
});
},
views: views,
destinations: widget.destinations,
currentLocation: widget.currentLocation,
),
)
: navigationRail(context),
child: hasOverlay
? expandedSideBar
? MediaQuery.removePadding(
context: widget.parentContext,
child: NestedNavigationDrawer(
isExpanded: expandedSideBar,
actionButton: actionButton(),
toggleExpanded: (value) {
setState(() {
expandedSideBar = value;
});
},
views: views,
destinations: widget.destinations,
currentLocation: widget.currentLocation,
),
)
: navigationRail(context)
: const SizedBox(),
),
Flexible(
child: widget.child,
child: MediaQuery(
data: semiNestedPadding(context, hasOverlay),
child: widget.child,
),
),
],
)
};
}
MediaQueryData semiNestedPadding(BuildContext context, bool hasOverlay) {
final paddingOf = MediaQuery.paddingOf(context);
return MediaQuery.of(context).copyWith(
padding: paddingOf.copyWith(left: hasOverlay ? 0 : paddingOf.left),
);
}
AdaptiveFab? actionButton() {
return (widget.currentIndex >= 0 && widget.currentIndex < widget.destinations.length)
? widget.destinations[widget.currentIndex].floatingActionButton
@ -120,7 +143,8 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
style: Theme.of(context).textTheme.titleSmall,
),
},
if (AdaptiveLayout.of(context).platform == TargetPlatform.macOS) SizedBox(height: MediaQuery.of(context).padding.top),
if (AdaptiveLayout.of(context).platform == TargetPlatform.macOS)
SizedBox(height: MediaQuery.of(context).padding.top),
Flexible(
child: Padding(
key: const Key('navigation_rail'),
@ -130,7 +154,7 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
children: [
IconButton(
onPressed: () {
if (AdaptiveLayout.layoutOf(context) != LayoutState.desktop) {
if (AdaptiveLayout.layoutOf(context) != ViewSize.desktop) {
widget.drawerKey.currentState?.openDrawer();
} else {
setState(() {
@ -140,7 +164,7 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
},
icon: const Icon(IconsaxBold.menu),
),
if (AdaptiveLayout.of(context).size == ScreenLayout.dual) ...[
if (AdaptiveLayout.layoutModeOf(context) == LayoutMode.dual) ...[
const SizedBox(height: 8),
AnimatedFadeSize(
child: AnimatedSwitcher(