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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
| import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: AccessibilityDemo()));
class AccessibilityDemo extends StatefulWidget {
const AccessibilityDemo({super.key});
@override
State<AccessibilityDemo> createState() => _AccessibilityDemoState();
}
class _AccessibilityDemoState extends State<AccessibilityDemo> {
bool _liked = false;
bool _subscribed = false;
int _counter = 0;
double _volume = 0.5;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Accessibility in Flutter')),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// ── 1. Image with semantics ─────────────────────────────────────
_SectionTitle('1. Images with semantic description'),
const SizedBox(height: 8),
Semantics(
label: 'Illustration of a mobile phone running the Flutter app',
image: true,
child: Container(
height: 120,
decoration: BoxDecoration(
color: Colors.blue.shade100,
borderRadius: BorderRadius.circular(12),
),
child: const Center(
child: Icon(Icons.phone_android, size: 64, color: Colors.blue),
),
),
),
const SizedBox(height: 4),
// Decorative text → exclude from semantics
ExcludeSemantics(
child: Text(
'★★★★★',
style: TextStyle(color: Colors.amber.shade600, fontSize: 18),
),
),
const SizedBox(height: 24),
// ── 2. Button with custom semantic action ───────────────────────
_SectionTitle('2. Button with state and semantics'),
const SizedBox(height: 8),
Semantics(
label: _liked ? 'Unlike' : 'Like',
hint: 'Double tap to ${_liked ? 'unlike' : 'like'}',
button: true,
checked: _liked,
child: GestureDetector(
onTap: () => setState(() => _liked = !_liked),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: BoxDecoration(
color: _liked ? Colors.red.shade50 : Colors.grey.shade100,
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: _liked ? Colors.red : Colors.grey.shade300,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_liked ? Icons.favorite : Icons.favorite_border,
color: _liked ? Colors.red : Colors.grey,
),
const SizedBox(width: 8),
Text(_liked ? 'Liked' : 'Like'),
],
),
),
),
),
const SizedBox(height: 24),
// ── 3. MergeSemantics: group text + image ───────────────────────
_SectionTitle('3. MergeSemantics: product card'),
const SizedBox(height: 8),
MergeSemantics(
child: Card(
child: ListTile(
leading: ExcludeSemantics(
child: CircleAvatar(
backgroundColor: Colors.green.shade100,
child: const Icon(Icons.book, color: Colors.green),
),
),
title: const Text('Flutter in Depth'),
subtitle: const Text('Book · \$29.99'),
trailing: Semantics(
label: _subscribed ? 'Bookmarked' : 'Bookmark',
button: true,
child: IconButton(
icon: Icon(
_subscribed ? Icons.bookmark : Icons.bookmark_border,
color: _subscribed ? Colors.green : null,
),
onPressed: () => setState(() => _subscribed = !_subscribed),
),
),
),
),
),
const SizedBox(height: 24),
// ── 4. Counter with value semantics ─────────────────────────────
_SectionTitle('4. Accessible counter'),
const SizedBox(height: 8),
Semantics(
label: 'Counter',
value: '$_counter',
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Semantics(
label: 'Decrement counter',
button: true,
child: IconButton.filled(
onPressed: () => setState(() => _counter--),
icon: const Icon(Icons.remove),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.displaySmall,
),
),
Semantics(
label: 'Increment counter',
button: true,
child: IconButton.filled(
onPressed: () => setState(() => _counter++),
icon: const Icon(Icons.add),
),
),
],
),
),
const SizedBox(height: 24),
// ── 5. Accessible slider ────────────────────────────────────────
_SectionTitle('5. Slider with value semantics'),
const SizedBox(height: 8),
Semantics(
label: 'Volume control',
value: '${(_volume * 100).round()} percent',
increasedValue: '${((_volume + 0.1).clamp(0, 1) * 100).round()} percent',
decreasedValue: '${((_volume - 0.1).clamp(0, 1) * 100).round()} percent',
child: Slider(
value: _volume,
onChanged: (v) => setState(() => _volume = v),
label: '${(_volume * 100).round()}%',
divisions: 10,
),
),
const SizedBox(height: 24),
// ── 6. Focus traversal ──────────────────────────────────────────
_SectionTitle('6. Correct focus order'),
const SizedBox(height: 8),
FocusTraversalGroup(
policy: OrderedTraversalPolicy(),
child: Column(
children: [
_FocusableField(order: 1, label: 'Name', hint: 'Enter your name'),
const SizedBox(height: 8),
_FocusableField(order: 2, label: 'Email', hint: 'name@example.com'),
const SizedBox(height: 8),
_FocusableField(order: 3, label: 'Password', hint: 'Minimum 8 characters', obscure: true),
const SizedBox(height: 8),
FocusTraversalOrder(
order: const NumericFocusOrder(4),
child: FilledButton(
onPressed: () {},
child: const Text('Create account'),
),
),
],
),
),
const SizedBox(height: 24),
// ── 7. Adaptive text scale ──────────────────────────────────────
_SectionTitle('7. Adaptive text scale'),
const SizedBox(height: 8),
Builder(builder: (context) {
final textScale = MediaQuery.textScalerOf(context).scale(1.0);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Current scale: ${textScale.toStringAsFixed(2)}x'),
const SizedBox(height: 4),
Text(
'This text respects the user\'s font size preferences.',
style: Theme.of(context).textTheme.bodyLarge,
),
Text(
'Text with scale capped at 1.5x (exceptional case)',
style: Theme.of(context).textTheme.bodyMedium,
textScaler: TextScaler.linear(textScale.clamp(0.8, 1.5)),
),
],
);
}),
],
),
);
}
}
class _FocusableField extends StatelessWidget {
final int order;
final String label;
final String hint;
final bool obscure;
const _FocusableField({
required this.order, required this.label,
required this.hint, this.obscure = false,
});
@override
Widget build(BuildContext context) {
return FocusTraversalOrder(
order: NumericFocusOrder(order.toDouble()),
child: Semantics(
label: label,
hint: hint,
textField: true,
child: TextField(
obscureText: obscure,
decoration: InputDecoration(
labelText: label,
hintText: hint,
border: const OutlineInputBorder(),
),
),
),
);
}
}
class _SectionTitle extends StatelessWidget {
final String text;
const _SectionTitle(this.text);
@override
Widget build(BuildContext context) => Text(
text,
style: Theme.of(context)
.textTheme
.titleSmall
?.copyWith(color: Theme.of(context).colorScheme.primary),
);
}
|