Skip to content

Commit 4e8bae0

Browse files
author
harishankar
committed
Elevation
1 parent bf36c30 commit 4e8bae0

File tree

3 files changed

+206
-3
lines changed

3 files changed

+206
-3
lines changed

‎lib/ScreenAbout.dart‎

Lines changed: 201 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ class ScreenAbout extends StatelessWidget {
77
@override
88
Widget build(BuildContext context) {
99

10+
const BorderRadius borderRadius = BorderRadius.all(Radius.circular(8.0));
11+
final Color color = Theme.of(context).colorScheme.surface;
12+
Color shadowColor = Theme.of(context).colorScheme.shadow;
13+
Color surfaceTint = Theme.of(context).colorScheme.primary;
14+
1015
final textTheme = Theme.of(context)
1116
.textTheme
1217
.apply(displayColor: Theme.of(context).colorScheme.onSurface);
@@ -16,13 +21,207 @@ class ScreenAbout extends StatelessWidget {
1621
children: <Widget>[
1722
const SizedBox(height: 7),
1823

19-
TextStyleExample(name: "About", style: textTheme.titleLarge!),
24+
TextStyleExample(name: "About Elevation", style: textTheme.titleLarge!),
2025
TextStyleExample(name: "A framework for building beautiful, natively compiled applications from a single codebase. Support is in progress for Material Design 3.", style: textTheme.titleMedium!),
21-
TextStyleExample(name: "The latest from Material for Flutter", style: textTheme.titleSmall!),
26+
TextStyleExample(name: "The Material widget is used to define a visual surface that can be elevated and tinted with a specified color. The Material widget has several properties that control its appearance, including:", style: textTheme.titleSmall!),
27+
28+
29+
30+
Padding(
31+
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
32+
child:
33+
Material(
34+
borderRadius: borderRadius,
35+
shadowColor: shadowColor,
36+
surfaceTintColor: surfaceTint,
37+
color: color,
38+
type: MaterialType.card,
39+
elevation: 5.0,
40+
child: const SizedBox(
41+
width: double.infinity,
42+
height: 100,
43+
child: Center(
44+
child: Text('Material3 Card Elevation')
45+
),
46+
),
47+
)
48+
49+
),
50+
51+
52+
53+
54+
55+
// Example
56+
Padding(
57+
padding: const EdgeInsets.fromLTRB(16.0, 20, 16.0, 0),
58+
child: Text(
59+
'Surface Tint only',
60+
style: Theme.of(context).textTheme.titleLarge,
61+
),
62+
),
63+
ElevationGrid(surfaceTintColor: surfaceTint),
64+
65+
const SizedBox(height: 10),
66+
Padding(
67+
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
68+
child: Text(
69+
'Surface Tint and Shadow',
70+
style: Theme.of(context).textTheme.titleLarge,
71+
),
72+
),
73+
ElevationGrid(shadowColor: shadowColor, surfaceTintColor: surfaceTint,),
74+
const SizedBox(height: 10),
75+
Padding(
76+
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
77+
child: Text(
78+
'Shadow only',
79+
style: Theme.of(context).textTheme.titleLarge,
80+
),
81+
),
82+
ElevationGrid(shadowColor: shadowColor)
83+
84+
85+
86+
87+
88+
2289

2390
],
2491
),
2592
);
2693
}
2794
}
2895

96+
97+
98+
99+
100+
101+
const double narrowScreenWidthThreshold = 450;
102+
103+
class ElevationGrid extends StatelessWidget {
104+
const ElevationGrid({super.key, this.shadowColor, this.surfaceTintColor});
105+
106+
final Color? shadowColor;
107+
final Color? surfaceTintColor;
108+
109+
List<ElevationCard> elevationCards(
110+
Color? shadowColor, Color? surfaceTintColor) {
111+
return elevations
112+
.map(
113+
(elevationInfo) => ElevationCard(
114+
info: elevationInfo,
115+
shadowColor: shadowColor,
116+
surfaceTint: surfaceTintColor,
117+
),
118+
)
119+
.toList();
120+
}
121+
122+
@override
123+
Widget build(BuildContext context) {
124+
return Padding(
125+
padding: const EdgeInsets.all(8),
126+
child: LayoutBuilder(builder: (context, constraints) {
127+
if (constraints.maxWidth < narrowScreenWidthThreshold) {
128+
return GridView.count(
129+
shrinkWrap: true,
130+
crossAxisCount: 3,
131+
children: elevationCards(shadowColor, surfaceTintColor),
132+
);
133+
} else {
134+
return GridView.count(
135+
shrinkWrap: true,
136+
crossAxisCount: 6,
137+
children: elevationCards(shadowColor, surfaceTintColor),
138+
);
139+
}
140+
}),
141+
);
142+
}
143+
}
144+
145+
class ElevationCard extends StatefulWidget {
146+
const ElevationCard(
147+
{super.key, required this.info, this.shadowColor, this.surfaceTint});
148+
149+
final ElevationInfo info;
150+
final Color? shadowColor;
151+
final Color? surfaceTint;
152+
153+
@override
154+
State<ElevationCard> createState() => _ElevationCardState();
155+
}
156+
157+
class _ElevationCardState extends State<ElevationCard> {
158+
late double _elevation;
159+
160+
@override
161+
void initState() {
162+
super.initState();
163+
_elevation = widget.info.elevation;
164+
}
165+
166+
@override
167+
Widget build(BuildContext context) {
168+
const BorderRadius borderRadius = BorderRadius.all(Radius.circular(4.0));
169+
final bool showOpacity = _elevation == widget.info.elevation;
170+
final Color color = Theme.of(context).colorScheme.surface;
171+
172+
return Padding(
173+
padding: const EdgeInsets.all(8.0),
174+
child:
175+
Material(
176+
borderRadius: borderRadius,
177+
elevation: _elevation,
178+
color: color,
179+
shadowColor: widget.shadowColor,
180+
surfaceTintColor: widget.surfaceTint,
181+
type: MaterialType.card,
182+
child: Padding(
183+
padding: const EdgeInsets.all(8.0),
184+
child: Column(
185+
crossAxisAlignment: CrossAxisAlignment.start,
186+
children: <Widget>[
187+
Text(
188+
'Level ${widget.info.level}',
189+
style: Theme.of(context).textTheme.labelMedium,
190+
),
191+
Text(
192+
'${widget.info.level.toInt()} dp',
193+
style: Theme.of(context).textTheme.labelMedium,
194+
),
195+
if (showOpacity)
196+
Expanded(
197+
child: Align(
198+
alignment: Alignment.bottomRight,
199+
child: Text(
200+
'${widget.info.overlayPercent}%',
201+
style: Theme.of(context).textTheme.bodySmall,
202+
),
203+
),
204+
),
205+
],
206+
),
207+
),
208+
),
209+
);
210+
}
211+
}
212+
213+
class ElevationInfo {
214+
const ElevationInfo(this.level, this.elevation, this.overlayPercent);
215+
final int level;
216+
final double elevation;
217+
final int overlayPercent;
218+
}
219+
220+
const List<ElevationInfo> elevations = <ElevationInfo>[
221+
ElevationInfo(0, 0.0, 0),
222+
ElevationInfo(1, 1.0, 5),
223+
ElevationInfo(2, 3.0, 8),
224+
ElevationInfo(3, 6.0, 11),
225+
ElevationInfo(4, 8.0, 12),
226+
ElevationInfo(5, 12.0, 14),
227+
];

‎lib/component/navigation.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const List<Widget> exampleBarDestinations = [
1818
NavigationDestination(
1919
tooltip: "",
2020
icon: Icon(Icons.text_snippet_outlined),
21-
label: 'About',
21+
label: 'Elevation',
2222
selectedIcon: Icon(Icons.text_snippet),
2323
),
2424
];

‎lib/main.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ class _Material3DemoState extends State<Material3Demo> {
5656
return ThemeData(
5757
colorSchemeSeed: colorOptions[colorSelected],
5858
useMaterial3: useMaterial3,
59+
fontFamily: 'Jost',
5960
brightness: useLightMode ? Brightness.light : Brightness.dark);
6061
}
6162

@@ -184,3 +185,6 @@ class _Material3DemoState extends State<Material3Demo> {
184185
);
185186
}
186187
}
188+
189+
190+

0 commit comments

Comments
 (0)