Add flutter_web samples (#75)

web/gallery/lib/demo/typography_demo.dart

@@ -0,0 +1,86 @@
+// Copyright 2018 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_web/material.dart';
+
+class TextStyleItem extends StatelessWidget {
+  const TextStyleItem({
+    Key key,
+    @required this.name,
+    @required this.style,
+    @required this.text,
+  })  : assert(name != null),
+        assert(style != null),
+        assert(text != null),
+        super(key: key);
+
+  final String name;
+  final TextStyle style;
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final TextStyle nameStyle =
+        theme.textTheme.caption.copyWith(color: theme.textTheme.caption.color);
+    return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
+        child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              SizedBox(width: 72.0, child: Text(name, style: nameStyle)),
+              Expanded(child: Text(text, style: style.copyWith(height: 1.0)))
+            ]));
+  }
+}
+
+class TypographyDemo extends StatelessWidget {
+  static const String routeName = '/typography';
+
+  @override
+  Widget build(BuildContext context) {
+    final TextTheme textTheme = Theme.of(context).textTheme;
+    final List<Widget> styleItems = <Widget>[
+      TextStyleItem(
+          name: 'Display 3', style: textTheme.display3, text: 'Regular 56sp'),
+      TextStyleItem(
+          name: 'Display 2', style: textTheme.display2, text: 'Regular 45sp'),
+      TextStyleItem(
+          name: 'Display 1', style: textTheme.display1, text: 'Regular 34sp'),
+      TextStyleItem(
+          name: 'Headline', style: textTheme.headline, text: 'Regular 24sp'),
+      TextStyleItem(name: 'Title', style: textTheme.title, text: 'Medium 20sp'),
+      TextStyleItem(
+          name: 'Subheading', style: textTheme.subhead, text: 'Regular 16sp'),
+      TextStyleItem(
+          name: 'Body 2', style: textTheme.body2, text: 'Medium 14sp'),
+      TextStyleItem(
+          name: 'Body 1', style: textTheme.body1, text: 'Regular 14sp'),
+      TextStyleItem(
+          name: 'Caption', style: textTheme.caption, text: 'Regular 12sp'),
+      TextStyleItem(
+          name: 'Button',
+          style: textTheme.button,
+          text: 'MEDIUM (ALL CAPS) 14sp'),
+    ];
+
+    if (MediaQuery.of(context).size.width > 500.0) {
+      styleItems.insert(
+          0,
+          TextStyleItem(
+              name: 'Display 4',
+              style: textTheme.display4,
+              text: 'Light 112sp'));
+    }
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Typography')),
+      body: SafeArea(
+        top: false,
+        bottom: false,
+        child: ListView(children: styleItems),
+      ),
+    );
+  }
+}