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
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Flutter code sample for [FocusTraversalGroup].
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
/// A button wrapper that adds either a numerical or lexical order, depending on
/// the type of T.
class OrderedButton<T> extends StatefulWidget {
const OrderedButton({
super.key,
required this.name,
this.canRequestFocus = true,
this.autofocus = false,
required this.order,
});
final String name;
final bool canRequestFocus;
final bool autofocus;
final T order;
@override
State<OrderedButton<T>> createState() => _OrderedButtonState<T>();
}
class _OrderedButtonState<T> extends State<OrderedButton<T>> {
late FocusNode focusNode;
@override
void initState() {
super.initState();
focusNode = FocusNode(
debugLabel: widget.name,
canRequestFocus: widget.canRequestFocus,
);
}
@override
void dispose() {
focusNode.dispose();
super.dispose();
}
@override
void didUpdateWidget(OrderedButton<T> oldWidget) {
super.didUpdateWidget(oldWidget);
focusNode.canRequestFocus = widget.canRequestFocus;
}
void _handleOnPressed() {
focusNode.requestFocus();
debugPrint('Button ${widget.name} pressed.');
debugDumpFocusTree();
}
@override
Widget build(BuildContext context) {
FocusOrder order;
if (widget.order is num) {
order = NumericFocusOrder((widget.order as num).toDouble());
} else {
order = LexicalFocusOrder(widget.order.toString());
}
Color? overlayColor(Set<MaterialState> states) {
if (states.contains(MaterialState.focused)) {
return Colors.red;
}
if (states.contains(MaterialState.hovered)) {
return Colors.blue;
}
return null; // defer to the default overlayColor
}
Color? foregroundColor(Set<MaterialState> states) {
if (states.contains(MaterialState.focused) ||
states.contains(MaterialState.hovered)) {
return Colors.white;
}
return null; // defer to the default foregroundColor
}
return FocusTraversalOrder(
order: order,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: OutlinedButton(
focusNode: focusNode,
autofocus: widget.autofocus,
style: ButtonStyle(
overlayColor:
MaterialStateProperty.resolveWith<Color?>(overlayColor),
foregroundColor:
MaterialStateProperty.resolveWith<Color?>(foregroundColor),
),
onPressed: () => _handleOnPressed(),
child: Text(widget.name),
),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
@override
Widget build(BuildContext context) {
return ColoredBox(
color: Colors.white,
child: FocusTraversalGroup(
policy: OrderedTraversalPolicy(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// A group that is ordered with a numerical order, from left to right.
FocusTraversalGroup(
policy: OrderedTraversalPolicy(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(3, (int index) {
return OrderedButton<num>(
name: 'num: $index',
// TRY THIS: change this to "3 - index" and see how the order changes.
order: index,
);
}),
),
),
// A group that is ordered with a lexical order, from right to left.
FocusTraversalGroup(
policy: OrderedTraversalPolicy(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(3, (int index) {
// Order as "C" "B", "A".
final String order =
String.fromCharCode('A'.codeUnitAt(0) + (2 - index));
return OrderedButton<String>(
name: 'String: $order',
order: order,
);
}),
),
),
// A group that orders in widget order, regardless of what the order is set to.
FocusTraversalGroup(
// Note that because this is NOT an OrderedTraversalPolicy, the
// assigned order of these OrderedButtons is ignored, and they
// are traversed in widget order. TRY THIS: change this to
// "OrderedTraversalPolicy()" and see that it now follows the
// numeric order set on them instead of the widget order.
policy: WidgetOrderTraversalPolicy(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(3, (int index) {
return OrderedButton<num>(
name: 'ignored num: ${3 - index}',
order: 3 - index,
);
}),
),
),
],
),
),
);
}
}