Responsive Visibility Creation #3

*Correctly calculate visibility for ResponsiveVisibility.

Author: rayliverified

lib/responsive_value.dart

@@ -11,7 +11,7 @@ class ResponsiveValue<T> {
   String smallerThan = '<';
 }
 
-class ResponsiveVisibility extends StatefulWidget {
+class ResponsiveVisibility extends StatelessWidget {
   final Widget child;
   final bool visible;
   final List<Condition> visibleWhen;
@@ -27,8 +27,8 @@ class ResponsiveVisibility extends StatefulWidget {
     Key key,
     @required this.child,
     this.visible = true,
-    this.visibleWhen,
-    this.hiddenWhen,
+    this.visibleWhen = const [],
+    this.hiddenWhen = const [],
     this.replacement = const SizedBox.shrink(),
     this.maintainState = false,
     this.maintainAnimation = false,
@@ -37,41 +37,6 @@ class ResponsiveVisibility extends StatefulWidget {
     this.maintainInteractivity = false,
   }) : super(key: key);
 
-  @override
-  _ResponsiveVisibilityState createState() => _ResponsiveVisibilityState();
-}
-
-class _ResponsiveVisibilityState extends State<ResponsiveVisibility>
-    with WidgetsBindingObserver {
-  List<Condition> conditions = [];
-  Condition activeCondition;
-  bool visibleValue;
-
-  void setDimensions() {
-    // Breakpoint reference check. Verify a parent
-    // [ResponsiveWrapper] exists if a reference is found.
-    if (conditions.firstWhere((element) => element.name != null,
-            orElse: () => null) !=
-        null) {
-      try {
-        ResponsiveWrapper.of(context);
-      } catch (e) {
-        throw FlutterError.fromParts(<DiagnosticsNode>[
-          ErrorSummary(
-              'A ResponsiveCondition was caught referencing a nonexistant breakpoint.'),
-          ErrorDescription(
-              'A ResponsiveCondition requires a parent ResponsiveWrapper '
-              'to reference breakpoints. Add a ResponsiveWrapper or remove breakpoint references.')
-        ]);
-      }
-    }
-
-    // Find the active condition.
-    activeCondition = getActiveCondition();
-    // Set value to active condition value or default value if null.
-    visibleValue = activeCondition?.value ?? widget.visible;
-  }
-
   /// Set [activeCondition].
   /// The active condition is found by matching the
   /// search criteria in order of precedence:
@@ -84,7 +49,8 @@ class _ResponsiveVisibilityState extends State<ResponsiveVisibility>
   ///   a. Named breakpoints.
   ///   b. Unnamed breakpoints.
   /// Returns null if no Active Condition is found.
-  Condition getActiveCondition() {
+  Condition getActiveCondition(
+      BuildContext context, List<Condition> conditions) {
     Condition equalsCondition = conditions.firstWhere((element) {
       if (element.condition == Conditional.EQUALS) {
         return ResponsiveWrapper.of(context).activeBreakpoint?.name ==
@@ -128,59 +94,55 @@ class _ResponsiveVisibilityState extends State<ResponsiveVisibility>
     return null;
   }
 
-  @override
-  void initState() {
-    super.initState();
-    // Initialize value.
-    visibleValue = widget.visible;
-    // Combine [ResponsiveCondition]s.
-    conditions
-        .addAll(widget.visibleWhen?.map((e) => e.copyWith(value: true)) ?? []);
-    conditions
-        .addAll(widget.hiddenWhen?.map((e) => e.copyWith(value: false)) ?? []);
-    // Sort by breakpoint value.
-    conditions.sort((a, b) => a.breakpoint.compareTo(b.breakpoint));
-
-    WidgetsBinding.instance.addObserver(this);
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      setDimensions();
-      setState(() {});
-    });
-  }
-
-  @override
-  void dispose() {
-    WidgetsBinding.instance.removeObserver(this);
-    super.dispose();
-  }
-
-  @override
-  void didChangeMetrics() {
-    super.didChangeMetrics();
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      setDimensions();
-      setState(() {});
-    });
-  }
+  bool getVisibleValue(BuildContext context, List<Condition> conditions) {
+    // Breakpoint reference check. Verify a parent
+    // [ResponsiveWrapper] exists if a reference is found.
+    if (conditions.firstWhere((element) => element.name != null,
+            orElse: () => null) !=
+        null) {
+      try {
+        ResponsiveWrapper.of(context);
+      } catch (e) {
+        throw FlutterError.fromParts(<DiagnosticsNode>[
+          ErrorSummary(
+              'A ResponsiveCondition was caught referencing a nonexistant breakpoint.'),
+          ErrorDescription(
+              'A ResponsiveCondition requires a parent ResponsiveWrapper '
+              'to reference breakpoints. Add a ResponsiveWrapper or remove breakpoint references.')
+        ]);
+      }
+    }
 
-  @override
-  void didUpdateWidget(ResponsiveVisibility oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    setDimensions();
-    setState(() {});
+    // Find the active condition.
+    Condition activeCondition = getActiveCondition(context, conditions);
+    // Return active condition value or default value if null.
+    return activeCondition?.value ?? visible;
   }
 
   @override
   Widget build(BuildContext context) {
+    // Initialize mutable value holders.
+    List<Condition> conditions = [];
+    Condition activeCondition;
+    bool visibleValue = visible;
+
+    // Combine Conditions.
+    conditions.addAll(visibleWhen?.map((e) => e.copyWith(value: true)) ?? []);
+    conditions.addAll(hiddenWhen?.map((e) => e.copyWith(value: false)) ?? []);
+    // Sort by breakpoint value.
+    conditions.sort((a, b) => a.breakpoint.compareTo(b.breakpoint));
+    // Get visible value from active condition.
+    visibleValue = getVisibleValue(context, conditions);
+
     return Visibility(
-      child: widget.child,
-      replacement: widget.replacement,
+      child: child,
+      replacement: replacement,
       visible: visibleValue,
-      maintainState: widget.maintainState,
-      maintainAnimation: widget.maintainAnimation,
-      maintainSize: widget.maintainSize,
-      maintainSemantics: widget.maintainSemantics,
-      maintainInteractivity: widget.maintainInteractivity,
+      maintainState: maintainState,
+      maintainAnimation: maintainAnimation,
+      maintainSize: maintainSize,
+      maintainSemantics: maintainSemantics,
+      maintainInteractivity: maintainInteractivity,
     );
   }
 }
@@ -209,13 +171,13 @@ class Condition {
         this.value = value;
 
   Condition.largerThan({int breakpoint, String name, bool value})
-      : this.breakpoint = breakpoint ?? double.infinity,
+      : this.breakpoint = breakpoint,
         this.name = name,
         this.condition = Conditional.LARGER_THAN,
         this.value = value;
 
   Condition.smallerThan({int breakpoint, String name, bool value})
-      : this.breakpoint = breakpoint ?? double.negativeInfinity,
+      : this.breakpoint = breakpoint,
         this.name = name,
         this.condition = Conditional.SMALLER_THAN,
         this.value = value;

lib/responsive_wrapper.dart

@@ -286,10 +286,10 @@ class _ResponsiveWrapperState extends State<ResponsiveWrapper>
   /// Active breakpoint segment is the first breakpoint segment
   /// smaller or equal to the [windowWidth].
   _ResponsiveBreakpointSegment getActiveBreakpointSegment(double windowWidth) {
-    _ResponsiveBreakpointSegment activeBreakpoint = breakpointSegments.reversed
-        .firstWhere(
+    _ResponsiveBreakpointSegment activeBreakpointSegment =
+        breakpointSegments.reversed.firstWhere(
             (element) => windowWidth >= element.breakpoint && !element.isTag);
-    return activeBreakpoint;
+    return activeBreakpointSegment;
   }
 
   @override
@@ -531,6 +531,7 @@ class _ResponsiveWrapperState extends State<ResponsiveWrapper>
           breakpointHolder = breakpoint;
           break;
         case _ResponsiveBreakpointBehavior.TAG:
+          breakpointHolder = breakpointHolder.copyWith(name: breakpoint.name);
           breakpointSegmentHolder = _ResponsiveBreakpointSegment(
             breakpoint: breakpoint.breakpoint,
             // Tag inherits behavior from previous breakpoint.
@@ -569,6 +570,7 @@ class ResponsiveWrapperData {
   final double scaledWidth;
   final double scaledHeight;
   final List<ResponsiveBreakpoint> breakpoints;
+  final List<_ResponsiveBreakpointSegment> breakpointSegments;
   final ResponsiveBreakpoint activeBreakpoint;
   final bool isMobile;
   final bool isPhone;
@@ -585,6 +587,7 @@ class ResponsiveWrapperData {
     this.scaledWidth,
     this.scaledHeight,
     this.breakpoints,
+    this.breakpointSegments,
     this.activeBreakpoint,
     this.isMobile,
     this.isPhone,
@@ -601,6 +604,7 @@ class ResponsiveWrapperData {
       scaledWidth: state.scaledWidth,
       scaledHeight: state.scaledHeight,
       breakpoints: state.breakpoints,
+      breakpointSegments: state.breakpointSegments,
       activeBreakpoint: state.activeBreakpointSegment.responsiveBreakpoint,
       isMobile:
           state.activeBreakpointSegment.responsiveBreakpoint.name == MOBILE,
@@ -625,6 +629,8 @@ class ResponsiveWrapperData {
       scaledHeight?.toString() +
       ', breakpoints: ' +
       breakpoints?.asMap().toString() +
+      ', breakpointSegments: ' +
+      breakpointSegments.toString() +
       ', activeBreakpoint: ' +
       activeBreakpoint.toString() +
       ', isMobile: ' +
@@ -637,16 +643,16 @@ class ResponsiveWrapperData {
       isDesktop?.toString() +
       ')';
 
-  bool equals(String breakpointName) => activeBreakpoint.name == breakpointName;
+  bool equals(String name) => activeBreakpoint.name == name;
 
-  /// Is the [scaledWidth] larger than or equal to [breakpointName]?
-  /// Defaults to false if the [breakpointName] cannot be found.
-  bool isLargerThan(String breakpointName) {
+  /// Is the [scaledWidth] larger than or equal to [name]?
+  /// Defaults to false if the [name] cannot be found.
+  bool isLargerThan(String name) {
     // No breakpoints to match.
     if (breakpoints.length == 0) return false;
 
     // Breakpoint is active breakpoint.
-    if (activeBreakpoint.name == breakpointName) return false;
+    if (activeBreakpoint.name == name) return false;
 
     // Single breakpoint is active and screen width
     // is larger than default breakpoint.
@@ -657,18 +663,24 @@ class ResponsiveWrapperData {
     // than screen width. Breakpoint names could be
     // chained so perform a full search from largest to smallest.
     for (var i = breakpoints.length - 2; i >= 0; i--) {
-      if (breakpoints[i].name == breakpointName &&
-          breakpoints[i + 1].name != breakpointName &&
+      if (breakpoints[i].name == name &&
+          breakpoints[i + 1].name != name &&
           screenWidth >= breakpoints[i + 1].breakpoint) return true;
     }
 
     return false;
   }
 
-  /// Is the [scaledWidth] smaller than the [breakpointName]?
-  /// Defaults to false if the [breakpointName] cannot be found.
-  bool isSmallerThan(String breakpointName) => breakpoints.any((element) =>
-      element.name == breakpointName && scaledWidth < element.breakpoint);
+  /// Is the [screenWidth] smaller than the [name]?
+  /// Defaults to false if the [name] cannot be found.
+  bool isSmallerThan(String name) =>
+      screenWidth <
+          breakpointSegments
+              .firstWhere(
+                  (element) => element.responsiveBreakpoint.name == name,
+                  orElse: null)
+              ?.breakpoint ??
+      0;
 }
 
 /// Creates an immutable widget that exposes [ResponsiveWrapperData]

test/responsive_wrapper_test.dart

@@ -534,9 +534,7 @@ void main() {
     });
 
     // Test infinite screen width and height.
-    testWidgets('Screen Size Infinite', (WidgetTester tester) async {
-      // Infinite screen width or height is not allowed.
-    }, skip: true);
+    // Infinite screen width or height is not allowed.
 
     // Test convenience comparators.
     testWidgets('Breakpoint Comparators', (WidgetTester tester) async {
@@ -587,7 +585,7 @@ void main() {
       expect(
           ResponsiveWrapperData.fromResponsiveWrapper(state)
               .isSmallerThan(TABLET),
-          true);
+          false);
       expect(
           ResponsiveWrapperData.fromResponsiveWrapper(state)
               .isSmallerThan(DESKTOP),
@@ -600,7 +598,7 @@ void main() {
           key: key,
           breakpoints: [
             ResponsiveBreakpoint.resize(450, name: MOBILE),
-            ResponsiveBreakpoint.resize(500, name: TABLET),
+            ResponsiveBreakpoint.resize(500, name: MOBILE),
             ResponsiveBreakpoint.resize(550, name: MOBILE),
             ResponsiveBreakpoint.resize(600),
             ResponsiveBreakpoint.resize(650, name: TABLET),
@@ -627,7 +625,7 @@ void main() {
       expect(
           ResponsiveWrapperData.fromResponsiveWrapper(state)
               .isLargerThan(TABLET),
-          true);
+          false);
       expect(
           ResponsiveWrapperData.fromResponsiveWrapper(state)
               .isLargerThan(DESKTOP),