typography_demo.dart 2.63 KB
Newer Older
Hans Muller's avatar
Hans Muller committed
1 2 3 4 5 6
// 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';

7
class TextStyleItem extends StatelessWidget {
8
  const TextStyleItem({
9 10 11 12
    Key key,
    @required this.name,
    @required this.style,
    @required this.text,
13 14 15 16
  }) : assert(name != null),
       assert(style != null),
       assert(text != null),
       super(key: key);
Hans Muller's avatar
Hans Muller committed
17 18 19 20 21

  final String name;
  final TextStyle style;
  final String text;

22
  @override
Hans Muller's avatar
Hans Muller committed
23 24
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
25
    final TextStyle nameStyle = theme.textTheme.caption.copyWith(color: theme.textTheme.caption.color);
26
    return Padding(
27
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
28
      child: Row(
29
        crossAxisAlignment: CrossAxisAlignment.start,
Hans Muller's avatar
Hans Muller committed
30
        children: <Widget>[
31
          SizedBox(
32
            width: 72.0,
33
            child: Text(name, style: nameStyle),
Hans Muller's avatar
Hans Muller committed
34
          ),
35
          Expanded(
36 37 38 39
            child: Text(text, style: style.copyWith(height: 1.0)),
          ),
        ],
      ),
Hans Muller's avatar
Hans Muller committed
40 41 42 43
    );
  }
}

44
class TypographyDemo extends StatelessWidget {
45 46
  static const String routeName = '/typography';

47
  @override
Hans Muller's avatar
Hans Muller committed
48
  Widget build(BuildContext context) {
49
    final TextTheme textTheme = Theme.of(context).textTheme;
Hans Muller's avatar
Hans Muller committed
50
    final List<Widget> styleItems = <Widget>[
51 52
      if (MediaQuery.of(context).size.width > 500.0)
        TextStyleItem(name: 'Display 4', style: textTheme.display4, text: 'Light 112sp'),
53 54 55 56 57 58 59 60 61
      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'),
62
      TextStyleItem(name: 'Button', style: textTheme.button, text: 'MEDIUM (ALL CAPS) 14sp'),
Hans Muller's avatar
Hans Muller committed
63 64
    ];

65 66 67
    return Scaffold(
      appBar: AppBar(title: const Text('Typography')),
      body: SafeArea(
68 69
        top: false,
        bottom: false,
70
        child: Scrollbar(child: ListView(children: styleItems)),
71
      ),
Hans Muller's avatar
Hans Muller committed
72 73 74
    );
  }
}