♻️ Optimized responsive navigation

This commit is contained in:
2024-11-14 22:21:13 +08:00
parent 00eef6e45a
commit e4582b7d25
15 changed files with 275 additions and 220 deletions

View File

@ -6,77 +6,83 @@ import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/navigation/app_background.dart';
import 'package:surface/widgets/navigation/app_bottom_navigation.dart';
import 'package:surface/widgets/navigation/app_drawer_navigation.dart';
import 'package:surface/widgets/navigation/app_rail_navigation.dart';
class AppScaffold extends StatelessWidget {
final PreferredSizeWidget? appBar;
final FloatingActionButtonLocation? floatingActionButtonLocation;
final Widget? floatingActionButton;
final String? title;
final Widget? body;
final bool autoImplyAppBar;
final bool showAppBar;
final bool showBottomNavigation;
final bool showDrawer;
const AppScaffold({
super.key,
this.appBar,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.title,
this.body,
this.autoImplyAppBar = false,
this.showAppBar = true,
this.showBottomNavigation = false,
this.showDrawer = false,
});
@override
Widget build(BuildContext context) {
final isShowDrawer = showDrawer
? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
: false;
final isShowBottomNavigation = (showBottomNavigation)
? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
: false;
final state = GoRouter.maybeOf(context);
final autoTitle = state != null
? 'screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}'
: 'screen';
final innerWidget = AppBackground(
child: Scaffold(
appBar: appBar ??
(autoImplyAppBar
? AppBar(
title: title != null
? Text(title!)
: state != null
? Text(
('screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}')
.tr(),
)
: null)
: null),
body: body,
floatingActionButtonLocation: floatingActionButtonLocation,
floatingActionButton: floatingActionButton,
drawer: isShowDrawer ? AppNavigationDrawer() : null,
bottomNavigationBar:
isShowBottomNavigation ? AppBottomNavigationBar() : null,
),
return Scaffold(
appBar: showAppBar
? AppBar(
title: Text(title ?? autoTitle.tr()),
)
: null,
body: body,
bottomNavigationBar:
isShowBottomNavigation ? AppBottomNavigationBar() : null,
);
}
}
class AppRootScaffold extends StatelessWidget {
final Widget body;
const AppRootScaffold({super.key, required this.body});
@override
Widget build(BuildContext context) {
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
final isCollapseDrawer =
ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE);
final isExpandDrawer = ResponsiveBreakpoints.of(context).largerThan(TABLET);
final innerWidget = isCollapseDrawer
? body
: Row(
children: [
Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Theme.of(context).dividerColor,
width: 1 / devicePixelRatio,
),
),
),
child: isExpandDrawer
? AppNavigationDrawer(elevation: 0)
: AppRailNavigation(),
),
Expanded(child: body),
],
);
return AppBackground(
child: Scaffold(
body: innerWidget,
drawer: !isExpandDrawer ? AppNavigationDrawer() : null,
),
);
if (showDrawer && ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
return Row(
children: [
AppNavigationDrawer(),
VerticalDivider(
width: 1 / devicePixelRatio,
thickness: 1 / devicePixelRatio,
),
Expanded(child: innerWidget),
],
);
}
return innerWidget;
}
}