typography demo

examples/material_gallery/lib/demo/typography_demo.dart

+// Copyright 2016 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 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class TextStyleItem extends StatelessComponent {
+  TextStyleItem({ Key key, this.name, this.style, this.text }) : super(key: key) {
+    assert(name != null);
+    assert(style != null);
+    assert(text != null);
+  }
+
+  final String name;
+  final TextStyle style;
+  final String text;
+
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final TextStyle nameStyle = theme.text.body1.copyWith(color: theme.text.caption.color);
+    return new Padding(
+      padding: const EdgeDims.symmetric(horizontal: 8.0, vertical: 16.0),
+      child: new Row(
+        alignItems: FlexAlignItems.start,
+        children: <Widget>[
+          new SizedBox(
+            width: 64.0,
+            child: new Text(name, style: nameStyle)
+          ),
+          new Flexible(
+            child: new Text(text, style: style)
+          )
+        ]
+      )
+    );
+  }
+}
+
+class TypographyDemo extends StatelessComponent {
+  Widget build(BuildContext context) {
+    final TextTheme textTheme = Theme.of(context).text;
+    final List<Widget> styleItems = <Widget>[
+      new TextStyleItem(name: 'display3', style: textTheme.display3, text: 'Regular 56sp'),
+      new TextStyleItem(name: 'display2', style: textTheme.display2, text: 'Regular 45sp'),
+      new TextStyleItem(name: 'display1', style: textTheme.display1, text: 'Regular 34sp'),
+      new TextStyleItem(name: 'headline', style: textTheme.headline, text: 'Regular 24sp'),
+      new TextStyleItem(name: 'title', style: textTheme.title, text: 'Medium 20sp'),
+      new TextStyleItem(name: 'subhead', style: textTheme.subhead, text: 'Regular 16sp'),
+      new TextStyleItem(name: 'body2', style: textTheme.body2, text: 'Medium 14sp'),
+      new TextStyleItem(name: 'body1', style: textTheme.body1, text: 'Reguluar 14sp'),
+      new TextStyleItem(name: 'caption', style: textTheme.caption, text: 'Regular 12sp'),
+      new TextStyleItem(name: 'button', style: textTheme.button, text: 'MEDIUM (ALL CAPS) 14sp')
+    ];
+
+    if (MediaQuery.of(context).size.width > 500.0) {
+      styleItems.insert(0, new TextStyleItem(
+        name: 'display4',
+        style: textTheme.display4,
+        text: 'Light 112sp'
+      ));
+    }
+
+    return new Scaffold(
+      toolBar: new ToolBar(center: new Text('Typography')),
+      body: new Block(children: styleItems)
+    );
+  }
+}

examples/material_gallery/lib/gallery/home.dart

@@ -28,6 +28,7 @@ import '../demo/tabs_demo.dart';
 import '../demo/tabs_fab_demo.dart';
 import '../demo/time_picker_demo.dart';
 import '../demo/two_level_list_demo.dart';
+import '../demo/typography_demo.dart';
 import '../demo/weathers_demo.dart';
 
 class GalleryHome extends StatefulComponent {
@@ -72,7 +73,8 @@ class GalleryHomeState extends State<GalleryHome> {
                   image: 'assets/section_style.png',
                   colors: Colors.green,
                   demos: <GalleryDemo>[
-                    new GalleryDemo(title: 'Colors', builder: () => new ColorsDemo())
+                    new GalleryDemo(title: 'Colors', builder: () => new ColorsDemo()),
+                    new GalleryDemo(title: 'Typography', builder: () => new TypographyDemo())
                   ]
                 )
               ]