Merge pull request #891 from SchabanBo/master

Fixs for #888 #889

@@ -53,6 +53,8 @@
       - [ObxValue](#obxvalue)
       - [ObxValue](#obxvalue)
   - [Useful tips](#useful-tips)
   - [Useful tips](#useful-tips)
       - [GetView](#getview)
       - [GetView](#getview)
+      - [GetResponsiveView](#getresponsiveview)
+        - [How to use it](#how-to-use-it)
       - [GetWidget](#getwidget)
       - [GetWidget](#getwidget)
       - [GetxService](#getxservice)
       - [GetxService](#getxservice)
 - [Breaking changes from 2.0](#breaking-changes-from-20)
 - [Breaking changes from 2.0](#breaking-changes-from-20)
@@ -903,6 +905,29 @@ Is a `const Stateless` Widget that has a getter `controller` for a registered `C
  }
  }
 ```
 ```
 
 
+#### GetResponsiveView
+
+Extend this widget to build responsive view.
+this widget contains the `screen` property that have all
+information about the screen size and type.
+
+##### How to use it
+
+You have two options to build it.
+
+- with `builder` method you return the widget to build.
+- with methods `desktop`, `tablet`,`phone`, `watch`. the specific
+method will be built when the screen type matches the method
+when the screen is [ScreenType.Tablet] the `tablet` method
+will be exuded and so on.
+**Note:** If you use this method please set the property `alwaysUseBuilder` to `false`
+
+With `settings` property you can set the width limit for the screen types.
+
+![example](https://github.com/SchabanBo/get_page_example/blob/master/docs/Example.gif?raw=true)
+Code to this screen
+[code](https://github.com/SchabanBo/get_page_example/blob/master/lib/pages/responsive_example/responsive_view.dart)
+
 #### GetWidget
 #### GetWidget
 
 
 Most people have no idea about this Widget, or totally confuse the usage of it.
 Most people have no idea about this Widget, or totally confuse the usage of it.

@@ -191,54 +191,11 @@ class GetCupertinoApp extends StatelessWidget {
     return PageRedirect(settings, unknownRoute).page();
     return PageRedirect(settings, unknownRoute).page();
   }
   }
 
 
-  List<Route<dynamic>> initialRoutesGenerate(String name) {
-    final match = Get.routeTree.matchRoute(name);
-    Get.parameters = match?.parameters;
-
-    //Route can be nullable, just pass the unknown route
-    if (match?.route == null) {
-      return [
-        GetPageRoute(
-          page: unknownRoute.page,
-          parameter: unknownRoute.parameter,
-          settings: RouteSettings(name: name, arguments: null),
-          curve: unknownRoute.curve,
-          opaque: unknownRoute.opaque,
-          routeName: unknownRoute.name,
-          customTransition: unknownRoute.customTransition,
-          binding: unknownRoute.binding,
-          bindings: unknownRoute.bindings,
-          transitionDuration: (unknownRoute.transitionDuration ??
-              Get.defaultTransitionDuration),
-          transition: unknownRoute.transition,
-          popGesture: unknownRoute.popGesture,
-          fullscreenDialog: unknownRoute.fullscreenDialog,
-        )
-      ];
-    }
-
-    return [
-      GetPageRoute(
-        page: match.route.page,
-        parameter: match.route.parameter,
-        settings: RouteSettings(name: name, arguments: null),
-        curve: match.route.curve,
-        opaque: match.route.opaque,
-        routeName: match.route.name,
-        binding: match.route.binding,
-        bindings: match.route.bindings,
-        transitionDuration:
-            (match.route.transitionDuration ?? Get.defaultTransitionDuration),
-        transition: match.route.transition,
-        popGesture: match.route.popGesture,
-        fullscreenDialog: match.route.fullscreenDialog,
-      )
-    ];
-  }
+  List<Route<dynamic>> initialRoutesGenerate(String name) =>
+      [PageRedirect(RouteSettings(name: name), unknownRoute).page()];
 
 
   @override
   @override
-  Widget build(BuildContext context) {
-    return GetBuilder<GetMaterialController>(
+  Widget build(BuildContext context) => GetBuilder<GetMaterialController>(
       init: Get.rootController,
       init: Get.rootController,
       dispose: (d) {
       dispose: (d) {
         onDispose?.call();
         onDispose?.call();
@@ -274,8 +231,41 @@ class GetCupertinoApp extends StatelessWidget {
               transitionDuration ?? Get.defaultTransitionDuration,
               transitionDuration ?? Get.defaultTransitionDuration,
         );
         );
       },
       },
-        builder: (_) {
-          return CupertinoApp(
+      builder: (_) => routerDelegate != null
+          ? CupertinoApp.router(
+              routerDelegate: routerDelegate,
+              routeInformationParser: routeInformationParser,
+              backButtonDispatcher: backButtonDispatcher,
+              routeInformationProvider: routeInformationProvider,
+              key: _.unikey,
+              theme: theme,
+              builder: (context, child) {
+                return Directionality(
+                  textDirection: textDirection ??
+                      (rtlLanguages.contains(Get.locale?.languageCode)
+                          ? TextDirection.rtl
+                          : TextDirection.ltr),
+                  child: builder == null ? child : builder(context, child),
+                );
+              },
+              title: title ?? '',
+              onGenerateTitle: onGenerateTitle,
+              color: color,
+              locale: Get.locale ?? locale,
+              localizationsDelegates: localizationsDelegates,
+              localeListResolutionCallback: localeListResolutionCallback,
+              localeResolutionCallback: localeResolutionCallback,
+              supportedLocales:
+                  supportedLocales ?? const <Locale>[Locale('en', 'US')],
+              showPerformanceOverlay: showPerformanceOverlay ?? false,
+              checkerboardRasterCacheImages:
+                  checkerboardRasterCacheImages ?? false,
+              checkerboardOffscreenLayers: checkerboardOffscreenLayers ?? false,
+              showSemanticsDebugger: showSemanticsDebugger ?? false,
+              debugShowCheckedModeBanner: debugShowCheckedModeBanner ?? true,
+              shortcuts: shortcuts,
+            )
+          : CupertinoApp(
               key: _.unikey,
               key: _.unikey,
               theme: theme,
               theme: theme,
               navigatorKey:
               navigatorKey:
@@ -289,8 +279,12 @@ class GetCupertinoApp extends StatelessWidget {
                   : initialRoutesGenerate,
                   : initialRoutesGenerate,
               onUnknownRoute: onUnknownRoute,
               onUnknownRoute: onUnknownRoute,
               navigatorObservers: (navigatorObservers == null
               navigatorObservers: (navigatorObservers == null
-                ? <NavigatorObserver>[GetObserver(routingCallback, Get.routing)]
-                : <NavigatorObserver>[GetObserver(routingCallback, Get.routing)]
+                  ? <NavigatorObserver>[
+                      GetObserver(routingCallback, Get.routing)
+                    ]
+                  : <NavigatorObserver>[
+                      GetObserver(routingCallback, Get.routing)
+                    ]
                 ..addAll(navigatorObservers)),
                 ..addAll(navigatorObservers)),
               builder: (context, child) {
               builder: (context, child) {
                 return Directionality(
                 return Directionality(
@@ -304,7 +298,6 @@ class GetCupertinoApp extends StatelessWidget {
               title: title ?? '',
               title: title ?? '',
               onGenerateTitle: onGenerateTitle,
               onGenerateTitle: onGenerateTitle,
               color: color,
               color: color,
-
               locale: Get.locale ?? locale,
               locale: Get.locale ?? locale,
               localizationsDelegates: localizationsDelegates,
               localizationsDelegates: localizationsDelegates,
               localeListResolutionCallback: localeListResolutionCallback,
               localeListResolutionCallback: localeListResolutionCallback,
@@ -319,7 +312,5 @@ class GetCupertinoApp extends StatelessWidget {
               debugShowCheckedModeBanner: debugShowCheckedModeBanner ?? true,
               debugShowCheckedModeBanner: debugShowCheckedModeBanner ?? true,
               shortcuts: shortcuts,
               shortcuts: shortcuts,
               //   actions: actions,
               //   actions: actions,
-          );
-        });
-  }
+            ));
 }
 }

@@ -198,58 +198,14 @@ class GetMaterialApp extends StatelessWidget {
         initialRoute = null,
         initialRoute = null,
         super(key: key);
         super(key: key);
 
 
-  Route<dynamic> generator(RouteSettings settings) {
-    return PageRedirect(settings, unknownRoute).page();
-  }
-
-  List<Route<dynamic>> initialRoutesGenerate(String name) {
-    final match = Get.routeTree.matchRoute(name);
-    Get.parameters = match?.parameters;
+  Route<dynamic> generator(RouteSettings settings) =>
+      PageRedirect(settings, unknownRoute).page();
 
 
-    //Route can be nullable, just pass the unknown route
-    if (match?.route == null) {
-      return [
-        GetPageRoute(
-          page: unknownRoute.page,
-          parameter: unknownRoute.parameter,
-          settings: RouteSettings(name: name, arguments: null),
-          curve: unknownRoute.curve,
-          opaque: unknownRoute.opaque,
-          routeName: unknownRoute.name,
-          customTransition: unknownRoute.customTransition,
-          binding: unknownRoute.binding,
-          bindings: unknownRoute.bindings,
-          transitionDuration: (unknownRoute.transitionDuration ??
-              Get.defaultTransitionDuration),
-          transition: unknownRoute.transition,
-          popGesture: unknownRoute.popGesture,
-          fullscreenDialog: unknownRoute.fullscreenDialog,
-        )
-      ];
-    }
-
-    return [
-      GetPageRoute(
-        page: match.route.page,
-        parameter: match.route.parameter,
-        settings: RouteSettings(name: name, arguments: null),
-        curve: match.route.curve,
-        opaque: match.route.opaque,
-        binding: match.route.binding,
-        routeName: match.route.name,
-        bindings: match.route.bindings,
-        transitionDuration:
-            (match.route.transitionDuration ?? Get.defaultTransitionDuration),
-        transition: match.route.transition,
-        popGesture: match.route.popGesture,
-        fullscreenDialog: match.route.fullscreenDialog,
-      )
-    ];
-  }
+  List<Route<dynamic>> initialRoutesGenerate(String name) =>
+      [PageRedirect(RouteSettings(name: name), unknownRoute).page()];
 
 
   @override
   @override
-  Widget build(BuildContext context) {
-    return GetBuilder<GetMaterialController>(
+  Widget build(BuildContext context) => GetBuilder<GetMaterialController>(
       init: Get.rootController,
       init: Get.rootController,
       dispose: (d) {
       dispose: (d) {
         onDispose?.call();
         onDispose?.call();
@@ -285,8 +241,44 @@ class GetMaterialApp extends StatelessWidget {
               transitionDuration ?? Get.defaultTransitionDuration,
               transitionDuration ?? Get.defaultTransitionDuration,
         );
         );
       },
       },
-        builder: (_) {
-          return MaterialApp(
+      builder: (_) => routerDelegate != null
+          ? MaterialApp.router(
+              routerDelegate: routerDelegate,
+              routeInformationParser: routeInformationParser,
+              backButtonDispatcher: backButtonDispatcher,
+              routeInformationProvider: routeInformationProvider,
+              key: _.unikey,
+              builder: (context, child) {
+                return Directionality(
+                  textDirection: textDirection ??
+                      (rtlLanguages.contains(Get.locale?.languageCode)
+                          ? TextDirection.rtl
+                          : TextDirection.ltr),
+                  child: builder == null ? child : builder(context, child),
+                );
+              },
+              title: title ?? '',
+              onGenerateTitle: onGenerateTitle,
+              color: color,
+              theme: _.theme ?? theme ?? ThemeData.fallback(),
+              darkTheme: darkTheme,
+              themeMode: _.themeMode ?? themeMode ?? ThemeMode.system,
+              locale: Get.locale ?? locale,
+              localizationsDelegates: localizationsDelegates,
+              localeListResolutionCallback: localeListResolutionCallback,
+              localeResolutionCallback: localeResolutionCallback,
+              supportedLocales:
+                  supportedLocales ?? const <Locale>[Locale('en', 'US')],
+              debugShowMaterialGrid: debugShowMaterialGrid ?? false,
+              showPerformanceOverlay: showPerformanceOverlay ?? false,
+              checkerboardRasterCacheImages:
+                  checkerboardRasterCacheImages ?? false,
+              checkerboardOffscreenLayers: checkerboardOffscreenLayers ?? false,
+              showSemanticsDebugger: showSemanticsDebugger ?? false,
+              debugShowCheckedModeBanner: debugShowCheckedModeBanner ?? true,
+              shortcuts: shortcuts,
+            )
+          : MaterialApp(
               key: _.unikey,
               key: _.unikey,
               navigatorKey:
               navigatorKey:
                   (navigatorKey == null ? Get.key : Get.addKey(navigatorKey)),
                   (navigatorKey == null ? Get.key : Get.addKey(navigatorKey)),
@@ -299,8 +291,12 @@ class GetMaterialApp extends StatelessWidget {
                   : initialRoutesGenerate,
                   : initialRoutesGenerate,
               onUnknownRoute: onUnknownRoute,
               onUnknownRoute: onUnknownRoute,
               navigatorObservers: (navigatorObservers == null
               navigatorObservers: (navigatorObservers == null
-                ? <NavigatorObserver>[GetObserver(routingCallback, Get.routing)]
-                : <NavigatorObserver>[GetObserver(routingCallback, Get.routing)]
+                  ? <NavigatorObserver>[
+                      GetObserver(routingCallback, Get.routing)
+                    ]
+                  : <NavigatorObserver>[
+                      GetObserver(routingCallback, Get.routing)
+                    ]
                 ..addAll(navigatorObservers)),
                 ..addAll(navigatorObservers)),
               builder: (context, child) {
               builder: (context, child) {
                 return Directionality(
                 return Directionality(
@@ -332,7 +328,5 @@ class GetMaterialApp extends StatelessWidget {
               debugShowCheckedModeBanner: debugShowCheckedModeBanner ?? true,
               debugShowCheckedModeBanner: debugShowCheckedModeBanner ?? true,
               shortcuts: shortcuts,
               shortcuts: shortcuts,
               //   actions: actions,
               //   actions: actions,
-          );
-        });
-  }
+            ));
 }
 }

@@ -5,6 +5,7 @@ export 'src/rx_flutter/rx_getx_widget.dart';
 export 'src/rx_flutter/rx_notifier.dart';
 export 'src/rx_flutter/rx_notifier.dart';
 export 'src/rx_flutter/rx_obx_widget.dart';
 export 'src/rx_flutter/rx_obx_widget.dart';
 export 'src/rx_flutter/rx_ticket_provider_mixin.dart';
 export 'src/rx_flutter/rx_ticket_provider_mixin.dart';
+export 'src/simple/get_responsive.dart';
 export 'src/simple/get_state.dart';
 export 'src/simple/get_state.dart';
 export 'src/simple/get_view.dart';
 export 'src/simple/get_view.dart';
 export 'src/simple/immutable_state.dart';
 export 'src/simple/immutable_state.dart';

+import 'package:flutter/widgets.dart';
+
+import '../../../get.dart';
+import 'get_view.dart';
+
+abstract class _GetResponsive<T> extends GetView<T> {
+  final ResponsiveScreen screen;
+  _GetResponsive(ResponsiveScreenSettings settings, {Key key})
+      : screen = ResponsiveScreen(settings),
+        super(key: key);
+
+  Widget builder();
+  Widget phone();
+  Widget tablet();
+  Widget desktop();
+  Widget watch();
+}
+
+/// Extend this widget to build responsive view.
+/// this widget contains the `screen` property that have all
+/// information about the screen size and type.
+/// You have two options to build it.
+/// 1- with `builder` method you return the widget to build.
+/// 2- with methods `desktop`, `tablet`,`phone`, `watch`. the specific
+/// method will be built when the screen type matches the method
+/// when the screen is [ScreenType.Tablet] the `tablet` method
+/// will be exuded and so on.
+/// Note if you use this method please set the 
+/// property `alwaysUseBuilder` to false
+/// With `settings` property you can set the width limit for the screen types.
+class GetResponsiveView<T> extends _GetResponsive<T> {
+  final bool alwaysUseBuilder = true;
+  GetResponsiveView(
+      {alwaysUseBuilder,
+      ResponsiveScreenSettings settings = const ResponsiveScreenSettings(),
+      Key key})
+      : super(settings, key: key);
+  @override
+  Widget build(BuildContext context) {
+    screen.context = context;
+    Widget widget;
+    if (alwaysUseBuilder) {
+      widget = builder();
+      if (widget != null) return widget;
+    }
+    if (screen.isDesktop) {
+      widget = desktop() ?? widget;
+      if (widget != null) return widget;
+    }
+    if (screen.isTablet) {
+      widget = tablet() ?? desktop();
+      if (widget != null) return widget;
+    }
+    if (screen.isPhone) {
+      widget = phone() ?? tablet() ?? desktop();
+      if (widget != null) return widget;
+    }
+    return watch() ?? phone() ?? tablet() ?? desktop() ?? builder();
+  }
+
+  @override
+  Widget builder() => null;
+
+  @override
+  Widget desktop() => null;
+
+  @override
+  Widget phone() => null;
+
+  @override
+  Widget tablet() => null;
+
+  @override
+  Widget watch() => null;
+}
+
+class ResponsiveScreenSettings {
+  /// When the width is greater als this value
+  /// the display will be set as [ScreenType.Desktop]
+  final double desktopChangePoint;
+
+  /// When the width is greater als this value
+  /// the display will be set as [ScreenType.Tablet]
+  /// or when width greater als [watchChangePoint] and smaller als this value
+  /// the display will be [ScreenType.Mobile]
+  final double tabletChangePoint;
+
+  /// When the width is smaller als this value
+  /// the display will be set as [ScreenType.Watch]
+  /// or when width greater als this value and smaller als [tabletChangePoint]
+  /// the display will be [ScreenType.Mobile]
+  final double watchChangePoint;
+
+  const ResponsiveScreenSettings(
+      {this.desktopChangePoint = 1200,
+      this.tabletChangePoint = 600,
+      this.watchChangePoint = 300});
+}
+
+class ResponsiveScreen {
+  BuildContext context;
+  final ResponsiveScreenSettings settings;
+
+  bool _isPaltformDesktop;
+  ResponsiveScreen(this.settings) {
+    _isPaltformDesktop = GetPlatform.isDesktop;
+  }
+
+  double get height => context.height;
+  double get width => context.width;
+
+  /// Is [screenType] [ScreenType.Desktop]
+  bool get isDesktop => (screenType == ScreenType.Desktop);
+
+  /// Is [screenType] [ScreenType.Tablet]
+  bool get isTablet => (screenType == ScreenType.Tablet);
+
+  /// Is [screenType] [ScreenType.Mobile]
+  bool get isPhone => (screenType == ScreenType.Phone);
+
+  /// Is [screenType] [ScreenType.Watch]
+  bool get isWatch => (screenType == ScreenType.Watch);
+
+  double get _getdeviceWidth {
+    if (_isPaltformDesktop) {
+      return width;
+    }
+    return context.mediaQueryShortestSide;
+  }
+
+  ScreenType get screenType {
+    final deviceWidth = _getdeviceWidth;
+    if (deviceWidth >= settings.desktopChangePoint) return ScreenType.Desktop;
+    if (deviceWidth >= settings.tabletChangePoint) return ScreenType.Tablet;
+    if (deviceWidth < settings.watchChangePoint) return ScreenType.Watch;
+    return ScreenType.Phone;
+  }
+
+  /// Return widget according to screen type
+  /// if the [screenType] is [ScreenType.Desktop] and
+  /// `desktop` object is null the `tablet` object will be returned
+  /// and if `tablet` object is null the `mobile` object will be returned
+  /// and if `mobile` object is null the `watch` object will be returned
+  ///  also when it is null.
+  T responsiveValue<T>({
+    T mobile,
+    T tablet,
+    T desktop,
+    T watch,
+  }) {
+    if (isDesktop && desktop != null) return desktop;
+    if (isTablet && tablet != null) return tablet;
+    if (isPhone && mobile != null) return mobile;
+    return watch;
+  }
+}
+
+enum ScreenType {
+  Watch,
+  Phone,
+  Tablet,
+  Desktop,
+}