focus_scope.dart 20.1 KB
Newer Older
1 2 3
// Copyright 2015 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.
4
import 'package:flutter/foundation.dart';
5 6 7 8

import 'basic.dart';
import 'focus_manager.dart';
import 'framework.dart';
9
import 'inherited_notifier.dart';
10

11 12
/// A widget that manages a [FocusNode] to allow keyboard focus to be given
/// to this widget and its descendants.
13
///
14
/// When the focus is gained or lost, [onFocusChanged] is called.
15
///
16 17 18
/// For keyboard events, [onKey] is called if [FocusNode.hasFocus] is true for
/// this widget's [focusNode], unless a focused descendant's [onKey] callback
/// returns false when called.
Adam Barth's avatar
Adam Barth committed
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
/// This widget does not provide any visual indication that the focus has
/// changed. Any desired visual changes should be made when [onFocusChanged] is
/// called.
///
/// To access the [FocusNode] of the nearest ancestor [Focus] widget and
/// establish a relationship that will rebuild the widget when the focus
/// changes, use the [Focus.of] and [FocusScope.of] static methods.
///
/// To access the focused state of the nearest [Focus] widget, use
/// [Focus.hasFocus] from a build method, which also establishes a relationship
/// between the calling widget and the [Focus] widget that will rebuild the
/// calling widget when the focus changes.
///
/// Managing a [FocusNode] means managing its lifecycle, listening for changes
/// in focus, and re-parenting it when needed to keep the focus hierarchy in
/// sync with the widget hierarchy. See [FocusNode] for more information about
/// the details of what node management entails if not using a [Focus] widget.
///
/// To collect a sub-tree of nodes into a group, use a [FocusScope].
///
/// {@tool snippet --template=stateful_widget_scaffold}
/// This example shows how to manage focus using the [Focus] and [FocusScope]
/// widgets. See [FocusNode] for a similar example that doesn't use [Focus] or
/// [FocusScope].
///
/// ```dart imports
/// import 'package:flutter/services.dart';
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
/// ```dart
/// Color _color = Colors.white;
///
/// bool _handleKeyPress(FocusNode node, RawKeyEvent event) {
///   if (event is RawKeyDownEvent) {
///     print('Focus node ${node.debugLabel} got key event: ${event.logicalKey}');
///     if (event.logicalKey == LogicalKeyboardKey.keyR) {
///       print('Changing color to red.');
///       setState(() {
///         _color = Colors.red;
///       });
///       return true;
///     } else if (event.logicalKey == LogicalKeyboardKey.keyG) {
///       print('Changing color to green.');
///       setState(() {
///         _color = Colors.green;
///       });
///       return true;
///     } else if (event.logicalKey == LogicalKeyboardKey.keyB) {
///       print('Changing color to blue.');
///       setState(() {
///         _color = Colors.blue;
///       });
///       return true;
///     }
///   }
///   return false;
/// }
///
/// @override
/// Widget build(BuildContext context) {
///   final TextTheme textTheme = Theme.of(context).textTheme;
///   return FocusScope(
///     debugLabel: 'Scope',
///     autofocus: true,
///     child: DefaultTextStyle(
///       style: textTheme.display1,
///       child: Focus(
///         onKey: _handleKeyPress,
///         debugLabel: 'Button',
///         child: Builder(
///           builder: (BuildContext context) {
///             final FocusNode focusNode = Focus.of(context);
///             final bool hasFocus = focusNode.hasFocus;
///             return GestureDetector(
///               onTap: () {
///                 if (hasFocus) {
96
///                   focusNode.unfocus();
97
///                 } else {
98
///                   focusNode.requestFocus();
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
///                 }
///               },
///               child: Center(
///                 child: Container(
///                   width: 400,
///                   height: 100,
///                   alignment: Alignment.center,
///                   color: hasFocus ? _color : Colors.white,
///                   child: Text(hasFocus ? "I'm in color! Press R,G,B!" : 'Press to focus'),
///                 ),
///               ),
///             );
///           },
///         ),
///       ),
///     ),
///   );
/// }
/// ```
/// {@end-tool}
Adam Barth's avatar
Adam Barth committed
119
///
120
/// See also:
Adam Barth's avatar
Adam Barth committed
121
///
122 123 124 125 126 127 128 129 130
///   * [FocusNode], which represents a node in the focus hierarchy and
///     [FocusNode]'s API documentation includes a detailed explanation of its
///     role in the overall focus system.
///   * [FocusScope], a widget that manages a group of focusable widgets using a
///     [FocusScopeNode].
///   * [FocusScopeNode], a node that collects focus nodes into a group for
///     traversal.
///   * [FocusManager], a singleton that manages the primary focus and
///     distributes key events to focused nodes.
131 132 133 134
///   * [FocusTraversalPolicy], an object used to determine how to move the
///     focus to other nodes.
///   * [DefaultFocusTraversal], a widget used to configure the default focus
///     traversal policy for a widget subtree.
135 136
class Focus extends StatefulWidget {
  /// Creates a widget that manages a [FocusNode].
137
  ///
138 139
  /// The [child] argument is required and must not be null.
  ///
140
  /// The [autofocus] and [skipTraversal] arguments must not be null.
141
  const Focus({
142
    Key key,
143 144
    @required this.child,
    this.focusNode,
145
    this.autofocus = false,
146 147 148
    this.onFocusChange,
    this.onKey,
    this.debugLabel,
149 150
    this.canRequestFocus,
    this.skipTraversal,
151 152 153
  })  : assert(child != null),
        assert(autofocus != null),
        super(key: key);
154

155 156 157 158 159 160 161 162 163 164 165
  /// A debug label for this widget.
  ///
  /// Not used for anything except to be printed in the diagnostic output from
  /// [toString] or [toStringDeep]. Also unused if a [focusNode] is provided,
  /// since that node can have its own [FocusNode.debugLabel].
  ///
  /// To get a string with the entire tree, call [debugDescribeFocusTree]. To
  /// print it to the console call [debugDumpFocusTree].
  ///
  /// Defaults to null.
  final String debugLabel;
166

167
  /// The child widget of this [Focus].
168
  ///
169 170
  /// {@macro flutter.widgets.child}
  final Widget child;
171

172 173
  /// Handler for keys pressed when this object or one of its children has
  /// focus.
174
  ///
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
  /// Key events are first given to the [FocusNode] that has primary focus, and
  /// if its [onKey] method return false, then they are given to each ancestor
  /// node up the focus hierarchy in turn. If an event reaches the root of the
  /// hierarchy, it is discarded.
  ///
  /// This is not the way to get text input in the manner of a text field: it
  /// leaves out support for input method editors, and doesn't support soft
  /// keyboards in general. For text input, consider [TextField],
  /// [EditableText], or [CupertinoTextField] instead, which do support these
  /// things.
  final FocusOnKeyCallback onKey;

  /// Handler called when the focus changes.
  ///
  /// Called with true if this node gains focus, and false if it loses
  /// focus.
  final ValueChanged<bool> onFocusChange;

193
  /// {@template flutter.widgets.Focus.autofocus}
194 195 196
  /// True if this widget will be selected as the initial focus when no other
  /// node in its scope is currently focused.
  ///
197 198 199 200 201 202
  /// Ideally, there is only one widget with autofocus set in each [FocusScope].
  /// If there is more than one widget with autofocus set, then the first one
  /// added to the tree will get focus.
  ///
  /// Must not be null. Defaults to false.
  /// {@endtemplate}
203 204
  final bool autofocus;

205 206
  /// {@template flutter.widgets.Focus.focusNode}
  /// An optional focus node to use as the focus node for this widget.
207
  ///
208 209 210 211 212
  /// If one is not supplied, then one will be automatically allocated, owned,
  /// and managed by this widget. The widget will be focusable even if a
  /// [focusNode] is not supplied. If supplied, the given `focusNode` will be
  /// _hosted_ by this widget, but not owned. See [FocusNode] for more
  /// information on what being hosted and/or owned implies.
213 214 215 216
  ///
  /// Supplying a focus node is sometimes useful if an ancestor to this widget
  /// wants to control when this widget has the focus. The owner will be
  /// responsible for calling [FocusNode.dispose] on the focus node when it is
217 218 219
  /// done with it, but this widget will attach/detach and reparent the node
  /// when needed.
  /// {@endtemplate}
220
  final FocusNode focusNode;
221

222 223 224 225 226
  /// Sets the [FocusNode.skipTraversal] flag on the focus node so that it won't
  /// be visited by the [FocusTraversalPolicy].
  ///
  /// This is sometimes useful if a Focus widget should receive key events as
  /// part of the focus chain, but shouldn't be accessible via focus traversal.
227 228 229 230
  ///
  /// This is different from [canRequestFocus] because it only implies that the
  /// widget can't be reached via traversal, not that it can't be focused. It may
  /// still be focused explicitly.
231 232
  final bool skipTraversal;

233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
  /// If true, this widget may request the primary focus.
  ///
  /// Defaults to true.  Set to false if you want the [FocusNode] this widget
  /// manages to do nothing when [requestFocus] is called on it. Does not affect
  /// the children of this node, and [FocusNode.hasFocus] can still return true
  /// if this node is the ancestor of the primary focus.
  ///
  /// This is different than [skipTraversal] because [skipTraversal] still
  /// allows the widget to be focused, just not traversed to.
  ///
  /// Setting [canRequestFocus] to false implies that the widget will also be
  /// skipped for traversal purposes.
  ///
  /// See also:
  ///
  ///   - [DefaultFocusTraversal], a widget that sets the traversal policy for
  ///     its descendants.
  ///   - [FocusTraversalPolicy], a class that can be extended to describe a
  ///     traversal policy.
  final bool canRequestFocus;

254 255
  /// Returns the [focusNode] of the [Focus] that most tightly encloses the
  /// given [BuildContext].
256
  ///
257 258 259 260
  /// If no [Focus] node is found before reaching the nearest [FocusScope]
  /// widget, or there is no [Focus] widget in scope, then this method will
  /// throw an exception. To return null instead of throwing, pass true for
  /// [nullOk].
261
  ///
262 263
  /// The [context] and [nullOk] arguments must not be null.
  static FocusNode of(BuildContext context, { bool nullOk = false }) {
264
    assert(context != null);
265
    assert(nullOk != null);
266
    final _FocusMarker marker = context.inheritFromWidgetOfExactType(_FocusMarker);
267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296
    final FocusNode node = marker?.notifier;
    if (node is FocusScopeNode) {
      if (!nullOk) {
        throw FlutterError(
            'Focus.of() was called with a context that does not contain a Focus between the given '
            'context and the nearest FocusScope widget.\n'
            'No Focus ancestor could be found starting from the context that was passed to '
            'Focus.of() to the point where it found the nearest FocusScope widget. This can happen '
            'because you are using a widget that looks for a Focus ancestor, and do not have a '
            'Focus widget ancestor in the current FocusScope.\n'
            'The context used was:\n'
            '  $context'
        );
      }
      return null;
    }
    if (node == null) {
      if (!nullOk) {
        throw FlutterError(
            'Focus.of() was called with a context that does not contain a Focus widget.\n'
            'No Focus widget ancestor could be found starting from the context that was passed to '
            'Focus.of(). This can happen because you are using a widget that looks for a Focus '
            'ancestor, and do not have a Focus widget descendant in the nearest FocusScope.\n'
            'The context used was:\n'
            '  $context'
        );
      }
      return null;
    }
    return node;
297 298
  }

299 300 301
  /// Returns true if the nearest enclosing [Focus] widget's node is focused.
  ///
  /// A convenience method to allow build methods to write:
302 303 304 305 306 307 308
  /// `Focus.isAt(context)` to get whether or not the nearest [Focus] above them
  /// in the widget hierarchy currently has the input focus.
  ///
  /// Returns false if no [Focus] widget is found before reaching the nearest
  /// [FocusScope], or if the root of the focus tree is reached without finding
  /// a [Focus] widget.
  static bool isAt(BuildContext context) => Focus.of(context, nullOk: true)?.hasFocus ?? false;
309

310
  @override
311 312 313 314
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('debugLabel', debugLabel, defaultValue: null));
    properties.add(FlagProperty('autofocus', value: autofocus, ifTrue: 'AUTOFOCUS', defaultValue: false));
315
    properties.add(DiagnosticsProperty<FocusNode>('node', focusNode, defaultValue: null));
316 317 318 319
  }

  @override
  _FocusState createState() => _FocusState();
320 321
}

322 323
class _FocusState extends State<Focus> {
  FocusNode _internalNode;
324
  FocusNode get focusNode => widget.focusNode ?? _internalNode;
325
  bool _hasFocus;
326
  bool _didAutofocus = false;
327 328 329 330 331 332 333 334 335 336 337
  FocusAttachment _focusAttachment;

  @override
  void initState() {
    super.initState();
    _initNode();
  }

  void _initNode() {
    if (widget.focusNode == null) {
      // Only create a new node if the widget doesn't have one.
338 339
      // This calls a function instead of just allocating in place because
      // _createNode is overridden in _FocusScopeState.
340 341
      _internalNode ??= _createNode();
    }
342 343
    focusNode.skipTraversal = widget.skipTraversal ?? focusNode.skipTraversal;
    focusNode.canRequestFocus = widget.canRequestFocus ?? focusNode.canRequestFocus;
344 345 346
    _focusAttachment = focusNode.attach(context, onKey: widget.onKey);
    _hasFocus = focusNode.hasFocus;

347
    // Add listener even if the _internalNode existed before, since it should
348
    // not be listening now if we're re-using a previous one because it should
349
    // have already removed its listener.
350
    focusNode.addListener(_handleFocusChanged);
351 352
  }

353 354 355 356 357 358 359
  FocusNode _createNode() {
    return FocusNode(
      debugLabel: widget.debugLabel,
      canRequestFocus: widget.canRequestFocus ?? true,
      skipTraversal: widget.skipTraversal ?? false,
    );
  }
360 361 362 363 364

  @override
  void dispose() {
    // Regardless of the node owner, we need to remove it from the tree and stop
    // listening to it.
365
    focusNode.removeListener(_handleFocusChanged);
366
    _focusAttachment.detach();
367

368 369 370 371 372
    // Don't manage the lifetime of external nodes given to the widget, just the
    // internal node.
    _internalNode?.dispose();
    super.dispose();
  }
373 374 375 376

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
377
    _focusAttachment?.reparent();
378
    if (!_didAutofocus && widget.autofocus) {
379
      FocusScope.of(context).autofocus(focusNode);
380 381 382 383 384
      _didAutofocus = true;
    }
  }

  @override
385 386 387 388 389 390 391 392
  void deactivate() {
    super.deactivate();
    _didAutofocus = false;
  }

  @override
  void didUpdateWidget(Focus oldWidget) {
    super.didUpdateWidget(oldWidget);
393 394 395 396 397 398 399 400 401 402
    assert(() {
      // Only update the debug label in debug builds, and only if we own the
      // node.
      if (oldWidget.debugLabel != widget.debugLabel && _internalNode != null) {
        _internalNode.debugLabel = widget.debugLabel;
      }
      return true;
    }());

    if (oldWidget.focusNode == widget.focusNode) {
403 404
      focusNode.skipTraversal = widget.skipTraversal ?? focusNode.skipTraversal;
      focusNode.canRequestFocus = widget.canRequestFocus ?? focusNode.canRequestFocus;
405 406
      return;
    }
407

408
    _focusAttachment.detach();
409 410
    focusNode.removeListener(_handleFocusChanged);
    _initNode();
411 412 413
  }

  void _handleFocusChanged() {
414
    if (_hasFocus != focusNode.hasFocus) {
415
      setState(() {
416
        _hasFocus = focusNode.hasFocus;
417 418
      });
      if (widget.onFocusChange != null) {
419
        widget.onFocusChange(focusNode.hasFocus);
420 421
      }
    }
422 423 424 425
  }

  @override
  Widget build(BuildContext context) {
426 427
    _focusAttachment.reparent();
    return _FocusMarker(
428
      node: focusNode,
429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451
      child: widget.child,
    );
  }
}

/// A [FocusScope] is similar to a [Focus], but also serves as a scope for other
/// [Focus]s and [FocusScope]s, grouping them together.
///
/// Like [Focus], [FocusScope] provides an [onFocusChange] as a way to be
/// notified when the focus is given to or removed from this widget.
///
/// The [onKey] argument allows specification of a key event handler that is
/// invoked when this node or one of its children has focus. Keys are handed to
/// the primary focused widget first, and then they propagate through the
/// ancestors of that node, stopping if one of them returns true from [onKey],
/// indicating that it has handled the event.
///
/// A [FocusScope] manages a [FocusScopeNode]. Managing a [FocusScopeNode] means
/// managing its lifecycle, listening for changes in focus, and re-parenting it
/// when the widget hierarchy changes. See [FocusNode] and [FocusScopeNode] for
/// more information about the details of what node management entails if not
/// using a [FocusScope] widget.
///
452 453 454 455 456 457 458 459 460 461 462 463 464 465
/// A [DefaultTraversalPolicy] widget provides the [FocusTraversalPolicy] for
/// the [FocusScopeNode]s owned by its descendant widgets. Each [FocusScopeNode]
/// has [FocusNode] descendants. The traversal policy defines what "previous
/// focus", "next focus", and "move focus in this direction" means for them.
///
/// [FocusScopeNode]s remember the last [FocusNode] that was focused within
/// their descendants, and can move that focus to the next/previous node, or a
/// node in a particular direction when the [FocusNode.nextFocus],
/// [FocusNode.previousFocus], or [FocusNode.focusInDirection] are called on a
/// [FocusNode] or [FocusScopeNode].
///
/// To move the focus, use methods on [FocusScopeNode]. For instance, to move
/// the focus to the next node, call `Focus.of(context).nextFocus()`.
///
466 467 468 469 470 471 472 473 474
/// See also:
///
///   * [FocusScopeNode], which represents a scope node in the focus hierarchy.
///   * [FocusNode], which represents a node in the focus hierarchy and has an
///     explanation of the focus system.
///   * [Focus], a widget that manages a [FocusNode] and allows easy access to
///     managing focus without having to manage the node.
///   * [FocusManager], a singleton that manages the focus and distributes key
///     events to focused nodes.
475 476 477 478
///   * [FocusTraversalPolicy], an object used to determine how to move the
///     focus to other nodes.
///   * [DefaultFocusTraversal], a widget used to configure the default focus
///     traversal policy for a widget subtree.
479 480 481 482 483 484 485 486
class FocusScope extends Focus {
  /// Creates a widget that manages a [FocusScopeNode].
  ///
  /// The [child] argument is required and must not be null.
  ///
  /// The [autofocus], and [showDecorations] arguments must not be null.
  const FocusScope({
    Key key,
487
    FocusScopeNode node,
488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532
    @required Widget child,
    bool autofocus = false,
    ValueChanged<bool> onFocusChange,
    FocusOnKeyCallback onKey,
    String debugLabel,
  })  : assert(child != null),
        assert(autofocus != null),
        super(
          key: key,
          child: child,
          focusNode: node,
          autofocus: autofocus,
          onFocusChange: onFocusChange,
          onKey: onKey,
          debugLabel: debugLabel,
        );

  /// Returns the [FocusScopeNode] of the [FocusScope] that most tightly
  /// encloses the given [context].
  ///
  /// If this node doesn't have a [Focus] widget ancestor, then the
  /// [FocusManager.rootScope] is returned.
  ///
  /// The [context] argument must not be null.
  static FocusScopeNode of(BuildContext context) {
    assert(context != null);
    final _FocusMarker marker = context.inheritFromWidgetOfExactType(_FocusMarker);
    return marker?.notifier?.nearestScope ?? context.owner.focusManager.rootScope;
  }

  @override
  _FocusScopeState createState() => _FocusScopeState();
}

class _FocusScopeState extends _FocusState {
  @override
  FocusScopeNode _createNode() {
    return FocusScopeNode(
      debugLabel: widget.debugLabel,
    );
  }

  @override
  Widget build(BuildContext context) {
    _focusAttachment.reparent();
533
    return Semantics(
534
      explicitChildNodes: true,
535
      child: _FocusMarker(
536
        node: focusNode,
537
        child: widget.child,
538 539 540 541
      ),
    );
  }
}
542 543 544 545 546 547 548 549 550 551 552

// The InheritedWidget marker for Focus and FocusScope.
class _FocusMarker extends InheritedNotifier<FocusNode> {
  const _FocusMarker({
    Key key,
    @required FocusNode node,
    @required Widget child,
  })  : assert(node != null),
        assert(child != null),
        super(key: key, notifier: node, child: child);
}