feat: add screenWidth support to responsive

skynexui · Jul 29, 2022 · 99ca51b · 99ca51b
1 parent b054f65
commit 99ca51b
Show file tree

Hide file tree

Showing 3 changed files with 173 additions and 75 deletions.
diff --git a/lib/responsive/responsive.dart b/lib/responsive/responsive.dart
@@ -56,6 +56,21 @@ dynamic resolveValueForBreakpoint(
   }
 }
 
+// ============================================================
+
+class ScreenWidth {
+  final double widthValue;
+  const ScreenWidth(this.widthValue);
+
+  double get value {
+    return widthValue;
+  }
+
+  double percent(double percent) {
+    return widthValue * (percent / 100);
+  }
+}
+
 class Responsive {
   final BuildContext context;
 
@@ -68,6 +83,11 @@ class Responsive {
     return activeBreakpoint;
   }
 
+  ScreenWidth get screenWidth {
+    var screenSize = MediaQuery.of(context).size.width;
+    return ScreenWidth(screenSize);
+  }
+
   ValueType value<ValueType>(
     Map<Breakpoints, ValueType> value,
   ) {

diff --git a/lib/responsive/responsive.md b/lib/responsive/responsive.md
@@ -34,6 +34,13 @@ class WidgetWithResponsiveOutput extends StatelessWidget {
 }
 ```
 
+- `responsive.screenWidth`: It's a easy way to access screen width and return it's value in different ways
+```dart
+// Screen Width Size => 1000
+var outputValue = responsive.screenWidth.value; // 1000
+var outputValue = responsive.screenWidth.percent(40); // 400
+```
+
 
 ### JavaScript
 

diff --git a/test/responsive/responsive_test.dart b/test/responsive/responsive_test.dart
@@ -18,6 +18,32 @@ class WidgetWithResponsiveOutput extends StatelessWidget {
   }
 }
 
+class WidgetWithResponsiveScreenWidthPercentageAccess extends StatelessWidget {
+  final double percent;
+  const WidgetWithResponsiveScreenWidthPercentageAccess(
+      {Key? key, required this.percent})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var responsive = Responsive(context);
+    var outputValue = responsive.screenWidth.percent(percent);
+    return Text("ScreenWidth: $outputValue");
+  }
+}
+
+class WidgetWithResponsiveScreenWidthValueAccess extends StatelessWidget {
+  const WidgetWithResponsiveScreenWidthValueAccess({Key? key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var responsive = Responsive(context);
+    var outputValue = responsive.screenWidth.value;
+    return Text("ScreenWidth: $outputValue");
+  }
+}
+
 const double screenHeight = 500;
 
 void main() {
@@ -30,79 +56,124 @@ void main() {
     );
   }
 
-  testWidgets(
-    'when is in a xs screen, returns the xs value',
-    (WidgetTester tester) async {
-      var screenWidthLessThanSm = breakpoints.sm - 1;
-      var screenWidthOfXsBreakpoint = screenWidthLessThanSm;
-
-      var testableWidget = makeTestableWidget(
-        child: const WidgetWithResponsiveOutput(),
-        size: Size(screenWidthOfXsBreakpoint, screenHeight),
-      );
-      await tester.pumpWidget(testableWidget);
-
-      expect(find.text('Screen: xs'), findsOneWidget);
-    },
-  );
-
-  testWidgets(
-    'when is in a sm screen, returns the sm value',
-    (WidgetTester tester) async {
-      var screenWidthLessThanMdAndBiggerThanSm = breakpoints.md - 1;
-      var screenWidthOfSmBreakpoint = screenWidthLessThanMdAndBiggerThanSm;
-      var testableWidget = makeTestableWidget(
-        child: const WidgetWithResponsiveOutput(),
-        size: Size(screenWidthOfSmBreakpoint, screenHeight),
-      );
-      await tester.pumpWidget(testableWidget);
-
-      expect(find.text('Screen: sm'), findsOneWidget);
-    },
-  );
-
-  testWidgets(
-    'when is in a md screen, returns the md value',
-    (WidgetTester tester) async {
-      var screenWidthLessThanLgAndBiggerThanMd = breakpoints.lg - 1;
-      var screenWidthOfMdBreakpoint = screenWidthLessThanLgAndBiggerThanMd;
-      var testableWidget = makeTestableWidget(
-        child: const WidgetWithResponsiveOutput(),
-        size: Size(screenWidthOfMdBreakpoint, screenHeight),
-      );
-      await tester.pumpWidget(testableWidget);
-
-      expect(find.text('Screen: md'), findsOneWidget);
-    },
-  );
-
-  testWidgets(
-    'when is in a lg screen, returns the lg value',
-    (WidgetTester tester) async {
-      var screenWidthLessThanXlAndBiggerThanLg = breakpoints.xl - 1;
-      var screenWidthOfLgBreakpoint = screenWidthLessThanXlAndBiggerThanLg;
-      var testableWidget = makeTestableWidget(
-        child: const WidgetWithResponsiveOutput(),
-        size: Size(screenWidthOfLgBreakpoint, screenHeight),
-      );
-      await tester.pumpWidget(testableWidget);
-
-      expect(find.text('Screen: lg'), findsOneWidget);
-    },
-  );
-
-  testWidgets(
-    'when is in a xl screen, returns the xl value',
-    (WidgetTester tester) async {
-      // For now, this is the biggest one from it to infinity.
-      var screenWidthOfXlBreakpoint = breakpoints.xl;
-      var testableWidget = makeTestableWidget(
-        child: const WidgetWithResponsiveOutput(),
-        size: Size(screenWidthOfXlBreakpoint, screenHeight),
-      );
-      await tester.pumpWidget(testableWidget);
-
-      expect(find.text('Screen: xl'), findsOneWidget);
-    },
-  );
+  group("screenWidth()", () {
+    const double screenWidthOf1000 = 1000;
+    testWidgets(
+      "when get screen size returns its value",
+      (WidgetTester tester) async {
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveScreenWidthValueAccess(),
+          size: const Size(screenWidthOf1000, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+        expect(find.text('ScreenWidth: 1000.0'), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      "when get 10% of a screen with 1000 of size, return '100.0'",
+      (WidgetTester tester) async {
+        const double percent = 10;
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveScreenWidthPercentageAccess(
+              percent: percent),
+          size: const Size(screenWidthOf1000, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+        expect(find.text('ScreenWidth: 100.0'), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      "when get 40% of a screen with 1000 of size, return '400.0'",
+      (WidgetTester tester) async {
+        const double percent = 40;
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveScreenWidthPercentageAccess(
+              percent: percent),
+          size: const Size(screenWidthOf1000, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+        expect(find.text('ScreenWidth: 400.0'), findsOneWidget);
+      },
+    );
+  });
+
+  group("value()", () {
+    testWidgets(
+      'when is in a xs screen, returns the xs value',
+      (WidgetTester tester) async {
+        var screenWidthLessThanSm = breakpoints.sm - 1;
+        var screenWidthOfXsBreakpoint = screenWidthLessThanSm;
+
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveOutput(),
+          size: Size(screenWidthOfXsBreakpoint, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+
+        expect(find.text('Screen: xs'), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'when is in a sm screen, returns the sm value',
+      (WidgetTester tester) async {
+        var screenWidthLessThanMdAndBiggerThanSm = breakpoints.md - 1;
+        var screenWidthOfSmBreakpoint = screenWidthLessThanMdAndBiggerThanSm;
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveOutput(),
+          size: Size(screenWidthOfSmBreakpoint, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+
+        expect(find.text('Screen: sm'), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'when is in a md screen, returns the md value',
+      (WidgetTester tester) async {
+        var screenWidthLessThanLgAndBiggerThanMd = breakpoints.lg - 1;
+        var screenWidthOfMdBreakpoint = screenWidthLessThanLgAndBiggerThanMd;
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveOutput(),
+          size: Size(screenWidthOfMdBreakpoint, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+
+        expect(find.text('Screen: md'), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'when is in a lg screen, returns the lg value',
+      (WidgetTester tester) async {
+        var screenWidthLessThanXlAndBiggerThanLg = breakpoints.xl - 1;
+        var screenWidthOfLgBreakpoint = screenWidthLessThanXlAndBiggerThanLg;
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveOutput(),
+          size: Size(screenWidthOfLgBreakpoint, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+
+        expect(find.text('Screen: lg'), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'when is in a xl screen, returns the xl value',
+      (WidgetTester tester) async {
+        // For now, this is the biggest one from it to infinity.
+        var screenWidthOfXlBreakpoint = breakpoints.xl;
+        var testableWidget = makeTestableWidget(
+          child: const WidgetWithResponsiveOutput(),
+          size: Size(screenWidthOfXlBreakpoint, screenHeight),
+        );
+        await tester.pumpWidget(testableWidget);
+
+        expect(find.text('Screen: xl'), findsOneWidget);
+      },
+    );
+  });
 }