modal_barrier.dart 6.12 KB
Newer Older
Adam Barth's avatar
Adam Barth committed
1 2 3 4
// 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.

5 6
import 'package:flutter/foundation.dart';

Adam Barth's avatar
Adam Barth committed
7
import 'basic.dart';
8
import 'container.dart';
9
import 'debug.dart';
Adam Barth's avatar
Adam Barth committed
10
import 'framework.dart';
Hixie's avatar
Hixie committed
11
import 'gesture_detector.dart';
Adam Barth's avatar
Adam Barth committed
12
import 'navigator.dart';
13 14
import 'transitions.dart';

15
/// A widget that prevents the user from interacting with widgets behind itself.
16 17 18 19 20 21 22 23 24 25 26 27 28
///
/// The modal barrier is the scrim that is rendered behind each route, which
/// generally prevents the user from interacting with the route below the
/// current route, and normally partially obscures such routes.
///
/// For example, when a dialog is on the screen, the page below the dialog is
/// usually darkened by the modal barrier.
///
/// See also:
///
///  * [ModalRoute], which indirectly uses this widget.
///  * [AnimatedModalBarrier], which is similar but takes an animated [color]
///    instead of a single color value.
29
class ModalBarrier extends StatelessWidget {
30
  /// Creates a widget that blocks user interaction.
31
  const ModalBarrier({
32
    Key key,
Hixie's avatar
Hixie committed
33
    this.color,
34
    this.dismissible = true,
35
    this.semanticsLabel,
36
    this.barrierSemanticsDismissible = true,
37 38
  }) : super(key: key);

39
  /// If non-null, fill the barrier with this color.
40 41 42 43 44
  ///
  /// See also:
  ///
  ///  * [ModalRoute.barrierColor], which controls this property for the
  ///    [ModalBarrier] built by [ModalRoute] pages.
45
  final Color color;
46 47

  /// Whether touching the barrier will pop the current route off the [Navigator].
48 49 50 51 52
  ///
  /// See also:
  ///
  ///  * [ModalRoute.barrierDismissible], which controls this property for the
  ///    [ModalBarrier] built by [ModalRoute] pages.
53
  final bool dismissible;
Adam Barth's avatar
Adam Barth committed
54

55 56 57 58 59 60 61
  /// Whether the modal barrier semantics are included in the semantics tree.
  ///
  /// See also:
  ///  * [ModalRoute.semanticsDismissible], which controls this property for
  ///    the [ModalBarrier] built by [ModalRoute] pages.
  final bool barrierSemanticsDismissible;

62 63 64 65 66 67 68 69 70 71 72
  /// Semantics label used for the barrier if it is [dismissable].
  ///
  /// The semantics label is read out by accessibility tools (e.g. TalkBack
  /// on Android and VoiceOver on iOS) when the barrier is focused.
  ///
  /// See also:
  ///
  ///  * [ModalRoute.barrierLabel], which controls this property for the
  ///    [ModalBarrier] built by [ModalRoute] pages.
  final String semanticsLabel;

73
  @override
Adam Barth's avatar
Adam Barth committed
74
  Widget build(BuildContext context) {
75
    assert(!dismissible || semanticsLabel == null || debugCheckHasDirectionality(context));
76
    final bool semanticsDismissible = dismissible && defaultTargetPlatform != TargetPlatform.android;
77
    final bool modalBarrierSemanticsDismissible = barrierSemanticsDismissible ?? semanticsDismissible;
78 79
    return BlockSemantics(
      child: ExcludeSemantics(
80 81 82
        // On Android, the back button is used to dismiss a modal. On iOS, some
        // modal barriers are not dismissible in accessibility mode.
        excluding: !semanticsDismissible || !modalBarrierSemanticsDismissible,
83
        child: GestureDetector(
84 85 86 87 88
          onTapDown: (TapDownDetails details) {
            if (dismissible)
              Navigator.pop(context);
          },
          behavior: HitTestBehavior.opaque,
89
          child: Semantics(
90 91
            label: semanticsDismissible ? semanticsLabel : null,
            textDirection: semanticsDismissible && semanticsLabel != null ? Directionality.of(context) : null,
92
            child: ConstrainedBox(
93
              constraints: const BoxConstraints.expand(),
94 95
              child: color == null ? null : DecoratedBox(
                decoration: BoxDecoration(
96
                  color: color,
97
                )
98
              )
Hixie's avatar
Hixie committed
99
            )
Adam Barth's avatar
Adam Barth committed
100 101
          )
        )
102 103 104 105 106
      )
    );
  }
}

107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
/// A widget that prevents the user from interacting with widgets behind itself,
/// and can be configured with an animated color value.
///
/// The modal barrier is the scrim that is rendered behind each route, which
/// generally prevents the user from interacting with the route below the
/// current route, and normally partially obscures such routes.
///
/// For example, when a dialog is on the screen, the page below the dialog is
/// usually darkened by the modal barrier.
///
/// This widget is similar to [ModalBarrier] except that it takes an animated
/// [color] instead of a single color.
///
/// See also:
///
///  * [ModalRoute], which uses this widget.
123
class AnimatedModalBarrier extends AnimatedWidget {
124
  /// Creates a widget that blocks user interaction.
125
  const AnimatedModalBarrier({
126
    Key key,
127
    Animation<Color> color,
128
    this.dismissible = true,
129
    this.semanticsLabel,
130
    this.barrierSemanticsDismissible,
131
  }) : super(key: key, listenable: color);
132

133
  /// If non-null, fill the barrier with this color.
134 135 136 137 138
  ///
  /// See also:
  ///
  ///  * [ModalRoute.barrierColor], which controls this property for the
  ///    [AnimatedModalBarrier] built by [ModalRoute] pages.
139
  Animation<Color> get color => listenable;
140 141

  /// Whether touching the barrier will pop the current route off the [Navigator].
142 143 144 145 146
  ///
  /// See also:
  ///
  ///  * [ModalRoute.barrierDismissible], which controls this property for the
  ///    [AnimatedModalBarrier] built by [ModalRoute] pages.
147
  final bool dismissible;
148

149 150 151 152 153 154 155 156 157 158
  /// Semantics label used for the barrier if it is [dismissable].
  ///
  /// The semantics label is read out by accessibility tools (e.g. TalkBack
  /// on Android and VoiceOver on iOS) when the barrier is focused.
  /// See also:
  ///
  ///  * [ModalRoute.barrierLabel], which controls this property for the
  ///    [ModalBarrier] built by [ModalRoute] pages.
  final String semanticsLabel;

159 160 161 162 163 164 165
  /// Whether the modal barrier semantics are included in the semantics tree.
  ///
  /// See also:
  ///  * [ModalRoute.semanticsDismissible], which controls this property for
  ///    the [ModalBarrier] built by [ModalRoute] pages.
  final bool barrierSemanticsDismissible;

166
  @override
167
  Widget build(BuildContext context) {
168
    return ModalBarrier(
169
      color: color?.value,
170
      dismissible: dismissible,
171
      semanticsLabel: semanticsLabel,
172
      barrierSemanticsDismissible: barrierSemanticsDismissible,
173 174 175
    );
  }
}