expand_icon.dart 6.43 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
Ian Hickson's avatar
Ian Hickson committed
4

5
import 'dart:math' as math;
6 7 8 9 10 11

import 'package:flutter/widgets.dart';

import 'colors.dart';
import 'debug.dart';
import 'icon_button.dart';
12
import 'icons.dart';
13
import 'material_localizations.dart';
14 15 16
import 'theme.dart';

/// A widget representing a rotating expand/collapse button. The icon rotates
17
/// 180 degrees when pressed, then reverts the animation on a second press.
18 19
/// The underlying icon is [Icons.expand_more].
///
20 21 22 23
/// The expand icon does not include a semantic label for accessibility. In
/// order to be accessible it should be combined with a label using
/// [MergeSemantics]. This is done automatically by the [ExpansionPanel] widget.
///
24 25
/// See [IconButton] for a more general implementation of a pressable button
/// with an icon.
26 27 28 29
///
/// See also:
///
///  * https://material.io/design/iconography/system-icons.html
30 31 32
class ExpandIcon extends StatefulWidget {
  /// Creates an [ExpandIcon] with the given padding, and a callback that is
  /// triggered when the icon is pressed.
33
  const ExpandIcon({
34
    Key key,
35 36
    this.isExpanded = false,
    this.size = 24.0,
37
    @required this.onPressed,
38
    this.padding = const EdgeInsets.all(8.0),
39 40 41
    this.color,
    this.disabledColor,
    this.expandedColor,
42 43 44 45
  }) : assert(isExpanded != null),
       assert(size != null),
       assert(padding != null),
       super(key: key);
46

47 48 49 50 51 52
  /// Whether the icon is in an expanded state.
  ///
  /// Rebuilding the widget with a different [isExpanded] value will trigger
  /// the animation, but will not trigger the [onPressed] callback.
  final bool isExpanded;

53 54 55 56 57 58
  /// The size of the icon.
  ///
  /// This property must not be null. It defaults to 24.0.
  final double size;

  /// The callback triggered when the icon is pressed and the state changes
59
  /// between expanded and collapsed. The value passed to the current state.
60 61 62 63
  ///
  /// If this is set to null, the button will be disabled.
  final ValueChanged<bool> onPressed;

64
  /// The padding around the icon. The entire padded icon will react to input
65 66 67
  /// gestures.
  ///
  /// This property must not be null. It defaults to 8.0 padding on all sides.
68
  final EdgeInsetsGeometry padding;
69

70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

  /// The color of the icon.
  ///
  /// Defaults to [Colors.black54] when the theme's
  /// [ThemeData.brightness] is [Brightness.light] and to
  /// [Colors.white60] when it is [Brightness.dark]. This adheres to the
  /// Material Design specifications for [icons](https://material.io/design/iconography/system-icons.html#color)
  /// and for [dark theme](https://material.io/design/color/dark-theme.html#ui-application)
  final Color color;

  /// The color of the icon when it is disabled,
  /// i.e. if [onPressed] is null.
  ///
  /// Defaults to [Colors.black38] when the theme's
  /// [ThemeData.brightness] is [Brightness.light] and to
85
  /// [Colors.white38] when it is [Brightness.dark]. This adheres to the
86 87 88 89 90 91 92 93 94 95 96 97 98
  /// Material Design specifications for [icons](https://material.io/design/iconography/system-icons.html#color)
  /// and for [dark theme](https://material.io/design/color/dark-theme.html#ui-application)
  final Color disabledColor;

  /// The color of the icon when the icon is expanded.
  ///
  /// Defaults to [Colors.black54] when the theme's
  /// [ThemeData.brightness] is [Brightness.light] and to
  /// [Colors.white] when it is [Brightness.dark]. This adheres to the
  /// Material Design specifications for [icons](https://material.io/design/iconography/system-icons.html#color)
  /// and for [dark theme](https://material.io/design/color/dark-theme.html#ui-application)
  final Color expandedColor;

99
  @override
100
  _ExpandIconState createState() => _ExpandIconState();
101 102
}

103
class _ExpandIconState extends State<ExpandIcon> with SingleTickerProviderStateMixin {
104 105 106
  AnimationController _controller;
  Animation<double> _iconTurns;

107 108 109
  static final Animatable<double> _iconTurnTween = Tween<double>(begin: 0.0, end: 0.5)
    .chain(CurveTween(curve: Curves.fastOutSlowIn));

110 111 112
  @override
  void initState() {
    super.initState();
113
    _controller = AnimationController(duration: kThemeAnimationDuration, vsync: this);
114
    _iconTurns = _controller.drive(_iconTurnTween);
115 116 117 118
    // If the widget is initially expanded, rotate the icon without animating it.
    if (widget.isExpanded) {
      _controller.value = math.pi;
    }
119 120 121 122 123 124 125 126
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

127
  @override
128
  void didUpdateWidget(ExpandIcon oldWidget) {
129
    super.didUpdateWidget(oldWidget);
130 131
    if (widget.isExpanded != oldWidget.isExpanded) {
      if (widget.isExpanded) {
132
        _controller.forward();
133
      } else {
134
        _controller.reverse();
135 136 137
      }
    }
  }
138

139
  void _handlePressed() {
140 141
    if (widget.onPressed != null)
      widget.onPressed(widget.isExpanded);
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
  /// Default icon colors and opacities for when [Theme.brightness] is set to
  /// [Brightness.light] are based on the
  /// [Material Design system icon specifications](https://material.io/design/iconography/system-icons.html#color).
  /// Icon colors and opacities for [Brightness.dark] are based on the
  /// [Material Design dark theme specifications](https://material.io/design/color/dark-theme.html#ui-application)
  Color get _iconColor {
    if (widget.isExpanded && widget.expandedColor != null) {
      return widget.expandedColor;
    }

    if (widget.color != null) {
      return widget.color;
    }

    switch(Theme.of(context).brightness) {
      case Brightness.light:
        return Colors.black54;
      case Brightness.dark:
        return Colors.white60;
    }

    assert(false);
    return null;
  }

169 170 171
  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));
172
    assert(debugCheckHasMaterialLocalizations(context));
173 174 175
    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
    final String onTapHint = widget.isExpanded ? localizations.expandedIconTapHint : localizations.collapsedIconTapHint;

176
    return Semantics(
177
      onTapHint: widget.onPressed == null ? null : onTapHint,
178
      child: IconButton(
179
        padding: widget.padding,
180
        iconSize: widget.size,
181 182
        color: _iconColor,
        disabledColor: widget.disabledColor,
183
        onPressed: widget.onPressed == null ? null : _handlePressed,
184
        icon: RotationTransition(
185
          turns: _iconTurns,
186
          child: const Icon(Icons.expand_more),
187 188
        ),
      ),
189 190 191
    );
  }
}