feat: add extension on build context (#1)

* feat: add extension method * docs: add new feature on the docs
displaykit · Oct 9, 2022 · a63b914 · a63b914
1 parent 0d84dc8
commit a63b914
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -95,9 +95,9 @@ yarn add @displaykit/responsive_styles
 
 | Feature.                                                     | Dart/Flutter | JavaScript/React |
 | ---                                                          | ---              | ---          |
-| [Responsive](./lib/responsive//responsive.md)                | ✅               | ❌            |
+| [Responsive](./lib/responsive/responsive.md)                | ✅               | ❌            |
 | [breakpoints](./lib/breakpoints/breakpoints.md)              | ✅               | ✅            |
-| [GridItem](./lib/grid-item//grid_item.md)                    | ✅               | 🚧            |
+| [GridItem](./lib/grid-item/grid_item.md)                    | ✅               | 🚧            |
 | BreakpointsProvider                                          | 🚧               | 🚧            |
 | parseStylesheet                                              | 🚧               | ✅            |
 | StyleSheet                                                   | 🚧               | ✅            |

diff --git a/lib/responsive/responsive.dart b/lib/responsive/responsive.dart
@@ -95,3 +95,7 @@ class Responsive {
     return resolveValueForBreakpoint(value, activeBreakpoint);
   }
 }
+
+extension ResponsiveStyles on BuildContext {
+  Responsive get responsive => Responsive(this);
+}
diff --git a/lib/responsive/responsive.md b/lib/responsive/responsive.md
@@ -41,6 +41,24 @@ var outputValue = responsive.screenWidth.value; // 1000
 var outputValue = responsive.screenWidth.percent(40); // 400
 ```
 
+- You can also use responsive directlu through the Flutter build context:
+```dart
+class WidgetWithResponsiveOutputByBuildContext extends StatelessWidget {
+  const WidgetWithResponsiveOutputByBuildContext({Key? key}) : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    var outputValue = context.responsive.value({
+      Breakpoints.xs: 'xs',
+      Breakpoints.sm: 'sm',
+      Breakpoints.md: 'md',
+      Breakpoints.lg: 'lg',
+      Breakpoints.xl: 'xl',
+    });
+    return Text("Screen: $outputValue");
+  }
+}
+```
+
 
 ### JavaScript
 

diff --git a/test/responsive/responsive_test.dart b/test/responsive/responsive_test.dart
@@ -18,6 +18,22 @@ class WidgetWithResponsiveOutput extends StatelessWidget {
   }
 }
 
+// TODO: Add tests on top of this
+class WidgetWithResponsiveOutputByBuildContext extends StatelessWidget {
+  const WidgetWithResponsiveOutputByBuildContext({Key? key}) : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    var outputValue = context.responsive.value({
+      Breakpoints.xs: 'xs',
+      Breakpoints.sm: 'sm',
+      Breakpoints.md: 'md',
+      Breakpoints.lg: 'lg',
+      Breakpoints.xl: 'xl',
+    });
+    return Text("Screen: $outputValue");
+  }
+}
+
 class WidgetWithResponsiveScreenWidthPercentageAccess extends StatelessWidget {
   final double percent;
   const WidgetWithResponsiveScreenWidthPercentageAccess(