Merge pull request #1831 from collinjackson/media_query

Media query class for querying viewport dimensions

examples/widgets/media_query.dart

+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(
+    new MaterialApp(
+      title: "Media Query Example",
+      routes: <String, RouteBuilder>{
+        '/': (RouteArguments args) => new MediaQueryExample()
+      }
+    )
+  );
+}
+
+class AdaptiveItem {
+  AdaptiveItem(this.name);
+  String name;
+
+  Widget toListItem() {
+    return new Row(
+      <Widget>[
+        new Container(
+          width: 32.0,
+          height: 32.0,
+          margin: const EdgeDims.all(8.0),
+          decoration: new BoxDecoration(
+            backgroundColor: Colors.lightBlueAccent[100]
+          )
+        ),
+        new Text(name)
+      ]
+    );
+  }
+
+  Widget toCard() {
+    return new Card(
+      child: new Column(
+        <Widget>[
+          new Flexible(
+            child: new Container(
+              decoration: new BoxDecoration(
+                backgroundColor: Colors.lightBlueAccent[100]
+              )
+            )
+          ),
+          new Container(
+            margin: const EdgeDims.only(left: 8.0),
+            child: new Row(
+              <Widget>[
+                new Flexible(
+                  child: new Text(name)
+                ),
+                new IconButton(
+                  icon: "navigation/more_vert"
+                )
+              ]
+            )
+          )
+        ]
+      )
+    );
+  }
+}
+
+class MediaQueryExample extends StatelessComponent {
+  static const double _maxChildExtent = 150.0;
+  static const double _gridViewBreakpoint = 450.0;
+
+  Widget _buildBody(BuildContext context) {
+    List<AdaptiveItem> items = <AdaptiveItem>[];
+
+    for (int i = 0; i < 30; i++)
+      items.add(new AdaptiveItem("Item $i"));
+
+    if (MediaQuery.of(context).size.width < _gridViewBreakpoint) {
+      return new Block(
+        items.map((AdaptiveItem item) => item.toListItem()).toList()
+      );
+    } else {
+      return new Block(
+        <Widget>[
+          new Grid(
+            items.map((AdaptiveItem item) => item.toCard()).toList(),
+            maxChildExtent: _maxChildExtent
+          )
+        ]
+      );
+    }
+  }
+
+  Widget build(BuildContext context)  {
+    return new Scaffold(
+      toolBar: new ToolBar(
+        center: new Text("Media Query Example")
+      ),
+      body: new Material(
+        child: _buildBody(context)
+      )
+    );
+  }
+}

packages/flutter/lib/src/material/material_app.dart

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:ui' as ui;
+
+import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
@@ -49,14 +52,19 @@ class _MaterialAppState extends State<MaterialApp> {
 
   GlobalObjectKey _navigator;
 
+  Size _size;
+
   void initState() {
     super.initState();
     _navigator = new GlobalObjectKey(this);
     WidgetFlutterBinding.instance.addEventListener(_backHandler);
+    _size = ui.window.size;
+    FlutterBinding.instance.addMetricListener(_metricHandler);
   }
 
   void dispose() {
     WidgetFlutterBinding.instance.removeEventListener(_backHandler);
+    FlutterBinding.instance.removeMetricListener(_metricHandler);
     super.dispose();
   }
 
@@ -72,19 +80,24 @@ class _MaterialAppState extends State<MaterialApp> {
     }
   }
 
+  void _metricHandler(Size size) => setState(() { _size = size; });
+
   Widget build(BuildContext context) {
-    return new Theme(
-      data: config.theme ?? new ThemeData.fallback(),
-      child: new DefaultTextStyle(
-        style: _errorTextStyle,
-        child: new DefaultAssetBundle(
-          bundle: _defaultBundle,
-          child: new Title(
-            title: config.title,
-            child: new Navigator(
-              key: _navigator,
-              routes: config.routes,
-              onGenerateRoute: config.onGenerateRoute
+    return new MediaQuery(
+      data: new MediaQueryData(size: _size),
+      child: new Theme(
+        data: config.theme ?? new ThemeData.fallback(),
+        child: new DefaultTextStyle(
+          style: _errorTextStyle,
+          child: new DefaultAssetBundle(
+            bundle: _defaultBundle,
+            child: new Title(
+              title: config.title,
+              child: new Navigator(
+                key: _navigator,
+                routes: config.routes,
+                onGenerateRoute: config.onGenerateRoute
+              )
             )
           )
         )

packages/flutter/lib/src/widgets/media_query.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'basic.dart';
+import 'framework.dart';
+
+enum Orientation { portrait, landscape }
+
+class MediaQueryData {
+
+  const MediaQueryData({ this.size });
+
+  final Size size;
+
+  Orientation get orientation {
+    return size.width > size.height ? Orientation.landscape : Orientation.portrait;
+  }
+
+  bool operator==(Object other) {
+    if (other.runtimeType != runtimeType)
+      return false;
+    MediaQueryData typedOther = other;
+    return typedOther.size == size;
+  }
+
+  int get hashCode => size.hashCode;
+
+  String toString() => '$runtimeType($size, $orientation)';
+}
+
+class MediaQuery extends InheritedWidget {
+  MediaQuery({
+    Key key,
+    this.data,
+    Widget child
+  }) : super(key: key, child: child) {
+    assert(child != null);
+    assert(data != null);
+  }
+
+  final MediaQueryData data;
+
+  static MediaQueryData of(BuildContext context) {
+    MediaQuery query = context.inheritedWidgetOfType(MediaQuery);
+    return query == null ? null : query.data;
+  }
+
+  bool updateShouldNotify(MediaQuery old) => data != old.data;
+
+  void debugFillDescription(List<String> description) {
+    super.debugFillDescription(description);
+    description.add('$data');
+  }
+}

packages/flutter/lib/widgets.dart

@@ -18,6 +18,7 @@ export 'src/widgets/gesture_detector.dart';
 export 'src/widgets/gridpaper.dart';
 export 'src/widgets/heroes.dart';
 export 'src/widgets/homogeneous_viewport.dart';
+export 'src/widgets/media_query.dart';
 export 'src/widgets/mimic.dart';
 export 'src/widgets/mixed_viewport.dart';
 export 'src/widgets/navigator.dart';