/
main.dart
147 lines (131 loc) · 3.67 KB
/
main.dart
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import 'package:eo_color/eo_color.dart';
import 'package:eo_color_example/contrast.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const ExampleApp());
}
/// Root widget.
class ExampleApp extends StatelessWidget {
/// Ctor.
const ExampleApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'EO Color Showcase',
home: Showcase(title: 'Material Design Color Palettes'),
);
}
}
/// Showcase widget of color swatches.
class Showcase extends StatelessWidget {
/// Ctor.
const Showcase({required String title, Key? key})
: _title = title,
super(key: key);
final String _title;
static const _barBg = Grey.veryLight();
static const _barText = Grey.dark();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: _barBg.color,
title: Text(
_title,
style: TextStyle(color: _barText.color, fontWeight: FontWeight.bold),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const [
SwatchWidget.blueGreys(),
SwatchWidget.greys(),
SwatchWidget.browns(),
],
),
),
);
}
}
/// Color swatch widget that mimics the Material Design color showcase.
class SwatchWidget extends StatelessWidget {
const SwatchWidget(Swatch swatch, Contrast contrast, String title, {Key? key})
: _swatch = swatch,
_contrast = contrast,
_title = '$title 50',
super(key: key);
/// Brown swatch.
const SwatchWidget.browns({Key? key})
: this(const Browns(), const Contrast.forBrown(), 'Brown', key: key);
/// Blue-Grey swatch.
const SwatchWidget.blueGreys({Key? key})
: this(
const BlueGreys(),
const Contrast.forBlueGrey(),
'Blue-Grey',
key: key,
);
/// Grey swatch.
const SwatchWidget.greys({Key? key})
: this(const Greys(), const Contrast.forGrey(), 'Grey', key: key);
final Swatch _swatch;
// Text contrast colors.
final Contrast _contrast;
final String _title;
@override
Widget build(BuildContext context) {
final colors = _swatch.colors.toList(growable: false);
final textFont = _contrast.colors.toList(growable: false);
final labels = [
_title,
...const ['100', '200', '300', '400', '500', '600', '700', '800', '900']
];
return SizedBox(
width: 250,
child: Card(
elevation: 2.0,
child: Column(
children: List<ColorTile>.generate(
colors.length,
(int i) => ColorTile(
label: labels[i],
bgColor: colors[i],
fontColor: textFont[i],
),
growable: false,
),
),
),
);
}
}
class ColorTile extends StatelessWidget {
const ColorTile({
required Color bgColor,
required Color fontColor,
required String label,
Key? key,
}) : _bgColor = bgColor,
_fontColor = fontColor,
_label = label,
super(key: key);
final Color _bgColor;
final Color _fontColor;
final String _label;
@override
Widget build(BuildContext context) {
final style = TextStyle(color: _fontColor, fontWeight: FontWeight.w500);
return ListTile(
tileColor: _bgColor,
leading: Text(_label, style: style),
trailing: Text(
'#${_bgColor.value.toRadixString(16).substring(2).toUpperCase()}',
style: style,
),
);
}
}