Use media query size to switch between nav rail and bottom tab menu

This commit is contained in:
Shawn 2023-09-01 14:51:46 -06:00
parent fa1c4bb52e
commit c05c92b442
2 changed files with 7 additions and 4 deletions

View File

@ -9,6 +9,8 @@ import 'package:wonders/ui/common/modals/fullscreen_video_viewer.dart';
import 'package:wonders/ui/common/utils/page_routes.dart'; import 'package:wonders/ui/common/utils/page_routes.dart';
class AppLogic { class AppLogic {
Size _appSize = Size.zero;
/// Indicates to the rest of the app that bootstrap has not completed. /// Indicates to the rest of the app that bootstrap has not completed.
/// The router will use this to prevent redirects while bootstrapping. /// The router will use this to prevent redirects while bootstrapping.
bool isBootstrapComplete = false; bool isBootstrapComplete = false;
@ -78,16 +80,17 @@ class AppLogic {
} }
/// Called from the UI layer once a MediaQuery has been obtained /// Called from the UI layer once a MediaQuery has been obtained
void handleAppSizeChanged() { void handleAppSizeChanged(Size appSize) {
/// Disable landscape layout on smaller form factors /// Disable landscape layout on smaller form factors
bool isSmall = display.size.shortestSide / display.devicePixelRatio < 600; bool isSmall = display.size.shortestSide / display.devicePixelRatio < 600;
supportedOrientations = isSmall ? [Axis.vertical] : [Axis.vertical, Axis.horizontal]; supportedOrientations = isSmall ? [Axis.vertical] : [Axis.vertical, Axis.horizontal];
_updateSystemOrientation(); _updateSystemOrientation();
_appSize = appSize;
} }
Display get display => PlatformDispatcher.instance.displays.first; Display get display => PlatformDispatcher.instance.displays.first;
bool shouldUseNavRail() => display.size.width > display.size.height && display.size.height > 250; bool shouldUseNavRail() => _appSize.width > _appSize.height && _appSize.height > 250;
/// Enable landscape, portrait or both. Views can call this method to override the default settings. /// Enable landscape, portrait or both. Views can call this method to override the default settings.
/// For example, the [FullscreenVideoViewer] always wants to enable both landscape and portrait. /// For example, the [FullscreenVideoViewer] always wants to enable both landscape and portrait.

View File

@ -10,8 +10,8 @@ class WondersAppScaffold extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Listen to the device size, and update AppStyle when it changes // Listen to the device size, and update AppStyle when it changes
MediaQuery.of(context); final mq = MediaQuery.of(context);
appLogic.handleAppSizeChanged(); appLogic.handleAppSizeChanged(mq.size);
// Set default timing for animations in the app // Set default timing for animations in the app
Animate.defaultDuration = _style.times.fast; Animate.defaultDuration = _style.times.fast;
// Create a style object that will be passed down the widget tree // Create a style object that will be passed down the widget tree