1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 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)
);
}
}