Commit 6c2bbff4 authored by Collin Jackson's avatar Collin Jackson

Media query class for querying viewport information

parent af790303
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)
)
);
}
}
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
...@@ -49,14 +52,19 @@ class _MaterialAppState extends State<MaterialApp> { ...@@ -49,14 +52,19 @@ class _MaterialAppState extends State<MaterialApp> {
GlobalObjectKey _navigator; GlobalObjectKey _navigator;
Size _size;
void initState() { void initState() {
super.initState(); super.initState();
_navigator = new GlobalObjectKey(this); _navigator = new GlobalObjectKey(this);
WidgetFlutterBinding.instance.addEventListener(_backHandler); WidgetFlutterBinding.instance.addEventListener(_backHandler);
_size = ui.window.size;
FlutterBinding.instance.addMetricListener(_metricHandler);
} }
void dispose() { void dispose() {
WidgetFlutterBinding.instance.removeEventListener(_backHandler); WidgetFlutterBinding.instance.removeEventListener(_backHandler);
FlutterBinding.instance.removeMetricListener(_metricHandler);
super.dispose(); super.dispose();
} }
...@@ -72,19 +80,24 @@ class _MaterialAppState extends State<MaterialApp> { ...@@ -72,19 +80,24 @@ class _MaterialAppState extends State<MaterialApp> {
} }
} }
void _metricHandler(Size size) => setState(() { _size = size; });
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Theme( return new MediaQuery(
data: config.theme ?? new ThemeData.fallback(), data: new MediaQueryData(size: _size),
child: new DefaultTextStyle( child: new Theme(
style: _errorTextStyle, data: config.theme ?? new ThemeData.fallback(),
child: new DefaultAssetBundle( child: new DefaultTextStyle(
bundle: _defaultBundle, style: _errorTextStyle,
child: new Title( child: new DefaultAssetBundle(
title: config.title, bundle: _defaultBundle,
child: new Navigator( child: new Title(
key: _navigator, title: config.title,
routes: config.routes, child: new Navigator(
onGenerateRoute: config.onGenerateRoute key: _navigator,
routes: config.routes,
onGenerateRoute: config.onGenerateRoute
)
) )
) )
) )
......
// 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');
}
}
...@@ -18,6 +18,7 @@ export 'src/widgets/gesture_detector.dart'; ...@@ -18,6 +18,7 @@ export 'src/widgets/gesture_detector.dart';
export 'src/widgets/gridpaper.dart'; export 'src/widgets/gridpaper.dart';
export 'src/widgets/heroes.dart'; export 'src/widgets/heroes.dart';
export 'src/widgets/homogeneous_viewport.dart'; export 'src/widgets/homogeneous_viewport.dart';
export 'src/widgets/media_query.dart';
export 'src/widgets/mimic.dart'; export 'src/widgets/mimic.dart';
export 'src/widgets/mixed_viewport.dart'; export 'src/widgets/mixed_viewport.dart';
export 'src/widgets/navigator.dart'; export 'src/widgets/navigator.dart';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment