mirror of
https://github.com/gabehf/Fladder.git
synced 2026-03-13 17:30:31 -07:00
feat: UI 2.0 and other Improvements (#357)
Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
This commit is contained in:
parent
9ca06eaa37
commit
e7b5bb40ff
169 changed files with 4584 additions and 3626 deletions
|
|
@ -2,21 +2,14 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter/services.dart';
|
||||
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:iconsax_plus/iconsax_plus.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';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/adaptive_fab.dart';
|
||||
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/destination_model.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/navigation_drawer.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/settings_user_icon.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/side_navigation_bar.dart';
|
||||
|
||||
class NavigationBody extends ConsumerStatefulWidget {
|
||||
final BuildContext parentContext;
|
||||
|
|
@ -40,7 +33,7 @@ class NavigationBody extends ConsumerStatefulWidget {
|
|||
}
|
||||
|
||||
class _NavigationBodyState extends ConsumerState<NavigationBody> {
|
||||
bool expandedSideBar = true;
|
||||
double currentSideBarWidth = 80;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
|
|
@ -52,9 +45,9 @@ 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) {
|
||||
|
|
@ -66,56 +59,28 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
|
|||
},
|
||||
);
|
||||
|
||||
return switch (AdaptiveLayout.layoutOf(context)) {
|
||||
ViewSize.phone => MediaQuery.removePadding(
|
||||
context: widget.parentContext,
|
||||
Widget paddedChild() => MediaQuery(
|
||||
data: semiNestedPadding(widget.parentContext, hasOverlay),
|
||||
child: widget.child,
|
||||
),
|
||||
ViewSize.tablet => Row(
|
||||
children: [
|
||||
AnimatedFadeSize(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
child: hasOverlay ? navigationRail(context) : const SizedBox(),
|
||||
),
|
||||
Flexible(
|
||||
child: MediaQuery(
|
||||
data: semiNestedPadding(context, hasOverlay),
|
||||
child: widget.child,
|
||||
),
|
||||
);
|
||||
|
||||
return switch (AdaptiveLayout.layoutOf(context)) {
|
||||
ViewSize.phone => paddedChild(),
|
||||
ViewSize.tablet => hasOverlay
|
||||
? SideNavigationBar(
|
||||
currentIndex: widget.currentIndex,
|
||||
destinations: widget.destinations,
|
||||
currentLocation: widget.currentLocation,
|
||||
child: paddedChild(),
|
||||
scaffoldKey: widget.drawerKey,
|
||||
)
|
||||
],
|
||||
),
|
||||
ViewSize.desktop => Row(
|
||||
children: [
|
||||
AnimatedFadeSize(
|
||||
duration: const Duration(milliseconds: 125),
|
||||
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: MediaQuery(
|
||||
data: semiNestedPadding(context, hasOverlay),
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
],
|
||||
: paddedChild(),
|
||||
ViewSize.desktop => SideNavigationBar(
|
||||
currentIndex: widget.currentIndex,
|
||||
destinations: widget.destinations,
|
||||
currentLocation: widget.currentLocation,
|
||||
child: paddedChild(),
|
||||
scaffoldKey: widget.drawerKey,
|
||||
)
|
||||
};
|
||||
}
|
||||
|
|
@ -126,89 +91,4 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
|
|||
padding: paddingOf.copyWith(left: hasOverlay ? 0 : paddingOf.left),
|
||||
);
|
||||
}
|
||||
|
||||
AdaptiveFab? actionButton() {
|
||||
return (widget.currentIndex >= 0 && widget.currentIndex < widget.destinations.length)
|
||||
? widget.destinations[widget.currentIndex].floatingActionButton
|
||||
: null;
|
||||
}
|
||||
|
||||
Widget navigationRail(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
if (AdaptiveLayout.of(context).isDesktop && AdaptiveLayout.of(context).platform != TargetPlatform.macOS) ...{
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
"Fladder",
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
},
|
||||
if (AdaptiveLayout.of(context).platform == TargetPlatform.macOS)
|
||||
SizedBox(height: MediaQuery.of(context).padding.top),
|
||||
Flexible(
|
||||
child: Padding(
|
||||
key: const Key('navigation_rail'),
|
||||
padding:
|
||||
MediaQuery.paddingOf(context).copyWith(right: 0, top: AdaptiveLayout.of(context).isDesktop ? 8 : null),
|
||||
child: Column(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
if (AdaptiveLayout.layoutOf(context) != ViewSize.desktop) {
|
||||
widget.drawerKey.currentState?.openDrawer();
|
||||
} else {
|
||||
setState(() {
|
||||
expandedSideBar = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
icon: const Icon(IconsaxPlusBold.menu),
|
||||
),
|
||||
if (AdaptiveLayout.layoutModeOf(context) == LayoutMode.dual) ...[
|
||||
const SizedBox(height: 8),
|
||||
AnimatedFadeSize(
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
transitionBuilder: (Widget child, Animation<double> animation) {
|
||||
return ScaleTransition(scale: animation, child: child);
|
||||
},
|
||||
child: actionButton()?.normal,
|
||||
),
|
||||
),
|
||||
],
|
||||
const Spacer(),
|
||||
IconTheme(
|
||||
data: const IconThemeData(size: 28),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
...widget.destinations.mapIndexed(
|
||||
(index, destination) => destination.toNavigationButton(widget.currentIndex == index, false),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
SizedBox(
|
||||
height: 48,
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
child: widget.currentLocation.contains(const SettingsRoute().routeName)
|
||||
? Card(
|
||||
color: Theme.of(context).colorScheme.primaryContainer,
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Icon(IconsaxPlusBold.setting_3),
|
||||
),
|
||||
)
|
||||
: const SettingsUserIcon()),
|
||||
),
|
||||
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue