content: import 'package:flutter/material.dart';
  
  class LabelsPage extends StatelessWidget {
    static const String routeName = '/typography';
  
    @override
    Widget build(BuildContext context) {
      final textTheme = Theme.of(context).textTheme;
      final 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(
        body: SafeArea(
          top: false,
          bottom: false,
          child: ListView(children: styleItems),
        ),
      );
    }
  }
  
  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 theme = Theme.of(context);
      final 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),
              ),
            ),
          ],
        ),
      );
    }
  }
  