Breakpoint system

Author: JoseAlba

adaptive_breakpoints/CHANGELOG.md

@@ -1,3 +1,3 @@
-## [0.0.1] - TODO: Add release date.
+# [0.0.1] - August 12, 2020
 
-* TODO: Describe initial release.
+The initial release adds the [breakpoint system](https://material.io/design/layout/responsive-layout-grid.html#breakpoints)

adaptive_breakpoints/CONTRIBUTING.md

@@ -25,4 +25,4 @@ repo.
 
 1. Make sure all the existing tests are passing by using the following command (from the root of the project): `$ flutter test test/`.
 1. Create a PR to merge the branch on your fork into `dart-code-viewer/master`.
-1. Add `JoseAlba` as reviewers on the PR. We will take a look and add any comments. When the PR is ready to be merged, we will merge it and update the package.
+1. Add `JoseAlba` as reviewer on the PR. I will take a look and add any comments. When the PR is ready to be merged, we will merge it and update the package.

adaptive_breakpoints/README.md

@@ -1,16 +1,79 @@
 # adaptive_breakpoints
 
-A new Flutter project.
+The `adaptive_breakpoints` package for Flutter allows you to use the adaptive [breakpoints entries](https://material.io/design/layout/responsive-layout-grid.html#breakpoints) from the [Material Design System](https://material.io/).
 
 ## Getting Started
 
-This project is a starting point for a Flutter application.
+This package provides the material breakpoint entries for adaptive/responsive development in Flutter.
 
-A few resources to get you started if this is your first Flutter project:
+Firs, add the `adaptive_breakpoints` package to your pubspec dependencies.
 
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
+To import `adaptive_breakpoints`:
 
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+```dart
+import 'package:adaptive_breakpoints/adaptive_breakpoints.dart
+```
+
+Here is an example of how to implement the Adaptive Breakpoint entries in Flutter Development.
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:adaptive_breakpoints/adaptive_breakpoints.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: AdaptiveContainer(
+          windowLimit: AdaptiveWindow.m,
+          child: SizedBox(
+            height: 300,
+            child: Text('Adaptive Container'),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class AdaptiveContainer extends StatelessWidget {
+  final AdaptiveWindow windowLimit;
+  final Widget child;
+
+  const AdaptiveContainer({
+    @required this.windowLimit,
+    @required this.child,
+  })  : assert(windowLimit != null),
+        assert(child != null);
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        BreakpointSystemEntry entry =
+            getBreakpointEntry(MediaQuery.of(context).size);
+        if (entry.window == windowLimit) {
+          return Container(
+            constraints: BoxConstraints(
+              maxWidth: entry.window.longestWidth,
+              minWidth: entry.window.shortestWidth,
+            ),
+            width: MediaQuery.of(context).size.width - (entry.margins * 2),
+            margin: EdgeInsets.symmetric(horizontal: entry.margins),
+            color: Colors.pink,
+            child: child,
+          );
+        } else {
+          return SizedBox();
+        }
+      },
+    );
+  }
+}
+
+```

adaptive_breakpoints/example/README.md

@@ -1,16 +1,3 @@
-# example
+# Adaptive breakpoint sample app
 
-A new Flutter project.
-
-## Getting Started
-
-This project is a starting point for a Flutter application.
-
-A few resources to get you started if this is your first Flutter project:
-
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
-
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+This example application demonstrates how to use [`adaptive_breakpoints`](https://pub.dev/packages/adaptive_breakpoints) within a simple Flutter app.

adaptive_breakpoints/example/lib/main.dart

@@ -6,56 +6,53 @@ void main() {
 }
 
 class MyApp extends StatelessWidget {
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
+      home: Scaffold(
+        body: AdaptiveContainer(
+          windowLimit: AdaptiveWindow.m,
+          child: SizedBox(
+            height: 300,
+            child: Text('Adaptive Container'),
+          ),
+        ),
       ),
-      home: MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }
 
-class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key, this.title}) : super(key: key);
-  final String title;
+class AdaptiveContainer extends StatelessWidget {
+  final AdaptiveWindow windowLimit;
+  final Widget child;
 
-  @override
-  _MyHomePageState createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
+  const AdaptiveContainer({
+    @required this.windowLimit,
+    @required this.child,
+  })  : assert(windowLimit != null),
+        assert(child != null);
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Row(),
-            Wrap(),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        BreakpointSystemEntry entry =
+            getBreakpointEntry(MediaQuery.of(context).size);
+        if (entry.window == windowLimit) {
+          return Container(
+            constraints: BoxConstraints(
+              maxWidth: entry.window.longestWidth,
+              minWidth: entry.window.shortestWidth,
+            ),
+            width: MediaQuery.of(context).size.width - (entry.margins * 2),
+            margin: EdgeInsets.symmetric(horizontal: entry.margins),
+            color: Colors.pink,
+            child: child,
+          );
+        } else {
+          return SizedBox();
+        }
+      },
     );
   }
 }