Use new display API to detect device size.

README.md

@@ -23,11 +23,11 @@ To try the app you can download it from your favorite app store:
 
 If you're new to Flutter the first thing you'll need is to follow the [setup instructions](https://flutter.dev/docs/get-started/install).
 
-Once Flutter is setup, you can use the latest `beta` channel:
+Once Flutter is setup, you can use the latest `master` channel:
- * `flutter channel beta`
+ * `flutter channel master`
  * `flutter upgrade`
 
- Once on `beta` you're ready to run the app on your local device or simulator:
+ Once on `master` you're ready to run the app on your local device or simulator:
  * `flutter run -d ios`
  * `flutter run -d android`
 

lib/logic/app_logic.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:ui';
 
 import 'package:desktop_window/desktop_window.dart';
 import 'package:flutter_displaymode/flutter_displaymode.dart';
@@ -77,14 +78,16 @@ class AppLogic {
   }
 
   /// Called from the UI layer once a MediaQuery has been obtained
-  void handleAppSizeChanged(Size size) {
+  void handleAppSizeChanged() {
     /// Disable landscape layout on smaller form factors
-    bool isSmall = size.shortestSide < 500 && size != Size.zero;
+    bool isSmall = display.size.shortestSide / display.devicePixelRatio < 600;
     supportedOrientations = isSmall ? [Axis.vertical] : [Axis.vertical, Axis.horizontal];
     _updateSystemOrientation();
   }
 
-  bool shouldUseNavRail(Size size) => size.width > size.height && size.height > 250;
+  Display get display => PlatformDispatcher.instance.displays.first;
+
+  bool shouldUseNavRail() => true; //display.size.width > display.size.height && display.size.height > 250;
 
   /// 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.

lib/ui/app_scaffold.dart

@@ -10,9 +10,12 @@ class WondersAppScaffold extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // Listen to the device size, and update AppStyle when it changes
-    _style = AppStyle(screenSize: context.sizePx);
+    MediaQuery.of(context);
+    appLogic.handleAppSizeChanged();
+    // Set default timing for animations in the app
     Animate.defaultDuration = _style.times.fast;
-    appLogic.handleAppSizeChanged(context.mq.size);
+    // Create a style object that will be passed down the widget tree
+    _style = AppStyle(screenSize: context.sizePx);
     return KeyedSubtree(
       key: ValueKey($styles.scale),
       child: Theme(

lib/ui/screens/editorial/editorial_screen.dart

@@ -72,7 +72,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
 
       /// Attempt to maintain a similar aspect ratio for the image within the app-bar
       double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.2;
-      bool showBackBtn = appLogic.shouldUseNavRail(context.mq.size) == false;
+      bool showBackBtn = appLogic.shouldUseNavRail() == false;
       return PopRouterOnOverScroll(
         controller: _scroller,
         child: ColoredBox(

lib/ui/screens/wonder_details/wonders_details_screen.dart

@@ -47,7 +47,7 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
 
   @override
   Widget build(BuildContext context) {
-    _useNavRail = appLogic.shouldUseNavRail(context.mq.size);
+    _useNavRail = appLogic.shouldUseNavRail();
 
     final wonder = wondersLogic.getData(widget.type);
     int tabIndex = _tabController.index;