ink_well.dart 7.87 KB
Newer Older
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 'dart:collection';

7 8 9
import 'package:flutter/gestures.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
10

11
import 'debug.dart';
12 13
import 'material.dart';
import 'theme.dart';
14

15
/// An area of a [Material] that responds to touch. Has a configurable shape and
16 17 18 19 20 21 22 23 24 25 26
/// can be configured to clip splashes that extend outside its bounds or not.
///
/// For a variant of this widget that is specialised for rectangular areas that
/// always clip splashes, see [InkWell].
///
/// Must have an ancestor [Material] widget in which to cause ink reactions.
///
/// If a Widget uses this class directly, it should include the following line
/// at the top of its [build] function to call [debugCheckHasMaterial]:
///
///     assert(debugCheckHasMaterial(context));
27
class InkResponse extends StatefulWidget {
28 29 30
  /// Creates an area of a [Material] that responds to touch.
  ///
  /// Must have an ancestor [Material] widget in which to cause ink reactions.
31
  InkResponse({
32 33 34
    Key key,
    this.child,
    this.onTap,
35
    this.onDoubleTap,
36
    this.onLongPress,
37
    this.onHighlightChanged,
38
    this.containedInkWell: false,
39
    this.highlightShape: BoxShape.circle
40 41
  }) : super(key: key);

42
  /// The widget below this widget in the tree.
43
  final Widget child;
44

45
  /// Called when the user taps this part of the material
46
  final GestureTapCallback onTap;
47

48
  /// Called when the user double taps this part of the material.
49
  final GestureTapCallback onDoubleTap;
50

51
  /// Called when the user long-presses on this part of the material.
52
  final GestureLongPressCallback onLongPress;
53

54 55 56 57 58
  /// Called when this part of the material either becomes highlighted or stops behing highlighted.
  ///
  /// The value passed to the callback is true if this part of the material has
  /// become highlighted and false if this part of the material has stopped
  /// being highlighted.
59
  final ValueChanged<bool> onHighlightChanged;
60

61 62
  /// Whether this ink response should be clipped its bounds.
  final bool containedInkWell;
63

64
  /// The shape (e.g., circle, rectangle) to use for the highlight drawn around this part of the material.
65
  final BoxShape highlightShape;
66

67 68 69 70 71
  /// The rectangle to use for the highlight effect and for clipping
  /// the splash effects if [containedInkWell] is true.
  ///
  /// This method is intended to be overridden by descendants that
  /// specialize [InkResponse] for unusual cases. For example,
72
  /// [TableRowInkWell] implements this method to return the rectangle
73 74 75 76 77 78 79 80 81 82 83 84
  /// corresponding to the row that the widget is in.
  ///
  /// The default behavior returns null, which is equivalent to
  /// returning the referenceBox argument's bounding box (though
  /// slightly more efficient).
  RectCallback getRectCallback(RenderBox referenceBox) => null;

  /// Asserts that the given context satisfies the prerequisites for
  /// this class.
  ///
  /// This method is intended to be overridden by descendants that
  /// specialize [InkResponse] for unusual cases. For example,
85
  /// [TableRowInkWell] implements this method to verify that the widget is
86 87 88 89 90 91
  /// in a table.
  bool debugCheckContext(BuildContext context) {
    assert(debugCheckHasMaterial(context));
    return true;
  }

92
  @override
93
  _InkResponseState<InkResponse> createState() => new _InkResponseState<InkResponse>();
94 95
}

96
class _InkResponseState<T extends InkResponse> extends State<T> {
97

98 99
  Set<InkSplash> _splashes;
  InkSplash _currentSplash;
100 101 102 103 104 105 106 107 108 109 110 111 112
  InkHighlight _lastHighlight;

  void updateHighlight(bool value) {
    if (value == (_lastHighlight != null && _lastHighlight.active))
      return;
    if (value) {
      if (_lastHighlight == null) {
        RenderBox referenceBox = context.findRenderObject();
        assert(Material.of(context) != null);
        _lastHighlight = Material.of(context).highlightAt(
          referenceBox: referenceBox,
          color: Theme.of(context).highlightColor,
          shape: config.highlightShape,
113
          rectCallback: config.getRectCallback(referenceBox),
114 115 116 117 118 119 120 121 122 123 124
          onRemoved: () {
            assert(_lastHighlight != null);
            _lastHighlight = null;
          }
        );
      } else {
        _lastHighlight.activate();
      }
    } else {
      _lastHighlight.deactivate();
    }
125
    assert(value == (_lastHighlight != null && _lastHighlight.active));
126
    if (config.onHighlightChanged != null)
127
      config.onHighlightChanged(value);
128 129
  }

130 131 132 133
  void _handleTapDown(Point position) {
    RenderBox referenceBox = context.findRenderObject();
    assert(Material.of(context) != null);
    InkSplash splash;
134
    RectCallback rectCallback = config.getRectCallback(referenceBox);
135 136 137
    splash = Material.of(context).splashAt(
      referenceBox: referenceBox,
      position: referenceBox.globalToLocal(position),
138
      color: Theme.of(context).splashColor,
139 140
      containedInkWell: config.containedInkWell,
      rectCallback: config.containedInkWell ? rectCallback : null,
141 142 143 144 145 146 147 148 149
      onRemoved: () {
        if (_splashes != null) {
          assert(_splashes.contains(splash));
          _splashes.remove(splash);
          if (_currentSplash == splash)
            _currentSplash = null;
        } // else we're probably in deactivate()
      }
    );
150
    _splashes ??= new HashSet<InkSplash>();
151 152
    _splashes.add(splash);
    _currentSplash = splash;
153
    updateHighlight(true);
154 155
  }

156 157 158
  void _handleTap() {
    _currentSplash?.confirm();
    _currentSplash = null;
159
    updateHighlight(false);
160 161
    if (config.onTap != null)
      config.onTap();
162 163
  }

164 165 166
  void _handleTapCancel() {
    _currentSplash?.cancel();
    _currentSplash = null;
167
    updateHighlight(false);
168 169
  }

170 171 172 173 174
  void _handleDoubleTap() {
    _currentSplash?.confirm();
    _currentSplash = null;
    if (config.onDoubleTap != null)
      config.onDoubleTap();
175 176
  }

177 178 179 180 181 182 183
  void _handleLongPress() {
    _currentSplash?.confirm();
    _currentSplash = null;
    if (config.onLongPress != null)
      config.onLongPress();
  }

184
  @override
185 186 187 188 189 190 191 192 193
  void deactivate() {
    if (_splashes != null) {
      Set<InkSplash> splashes = _splashes;
      _splashes = null;
      for (InkSplash splash in splashes)
        splash.dispose();
      _currentSplash = null;
    }
    assert(_currentSplash == null);
194 195
    _lastHighlight?.dispose();
    _lastHighlight = null;
196
    super.deactivate();
197 198
  }

199
  @override
200
  Widget build(BuildContext context) {
201
    assert(config.debugCheckContext(context));
202
    _lastHighlight?.color = Theme.of(context).highlightColor;
203 204 205 206 207 208 209 210 211 212
    final bool enabled = config.onTap != null || config.onDoubleTap != null || config.onLongPress != null;
    return new GestureDetector(
      onTapDown: enabled ? _handleTapDown : null,
      onTap: enabled ? _handleTap : null,
      onTapCancel: enabled ? _handleTapCancel : null,
      onDoubleTap: config.onDoubleTap != null ? _handleDoubleTap : null,
      onLongPress: config.onLongPress != null ? _handleLongPress : null,
      behavior: HitTestBehavior.opaque,
      child: config.child
    );
213 214
  }

215
}
216

217 218 219 220 221 222
/// A rectangular area of a Material that responds to touch.
///
/// Must have an ancestor [Material] widget in which to cause ink reactions.
///
/// If a Widget uses this class directly, it should include the following line
/// at the top of its [build] function to call [debugCheckHasMaterial]:
223
///
224
///     assert(debugCheckHasMaterial(context));
225
class InkWell extends InkResponse {
226 227 228
  /// Creates an ink well.
  ///
  /// Must have an ancestor [Material] widget in which to cause ink reactions.
229 230 231
  InkWell({
    Key key,
    Widget child,
232
    GestureTapCallback onTap,
233
    GestureTapCallback onDoubleTap,
234
    GestureLongPressCallback onLongPress,
235
    ValueChanged<bool> onHighlightChanged
236 237 238 239 240
  }) : super(
    key: key,
    child: child,
    onTap: onTap,
    onDoubleTap: onDoubleTap,
241 242
    onLongPress: onLongPress,
    onHighlightChanged: onHighlightChanged,
243
    containedInkWell: true,
244
    highlightShape: BoxShape.rectangle
245
  );
246
}