action_chip.dart 7.47 KB
Newer Older
1 2 3 4
// 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.

5
import 'package:flutter/foundation.dart' show clampDouble;
6 7 8
import 'package:flutter/widgets.dart';

import 'chip.dart';
9
import 'chip_theme.dart';
10
import 'color_scheme.dart';
11
import 'colors.dart';
12
import 'debug.dart';
13
import 'text_theme.dart';
14
import 'theme.dart';
15 16
import 'theme_data.dart';

17
/// A Material Design action chip.
18 19 20 21 22
///
/// Action chips are a set of options which trigger an action related to primary
/// content. Action chips should appear dynamically and contextually in a UI.
///
/// Action chips can be tapped to trigger an action or show progress and
23 24
/// confirmation. For Material 3, a disabled state is supported for Action
/// chips and is specified with [onPressed] being null. For previous versions
25
/// of Material Design, it is recommended to remove the Action chip from
26
/// the interface entirely rather than display a disabled chip.
27 28 29 30 31 32 33 34 35 36
///
/// Action chips are displayed after primary content, such as below a card or
/// persistently at the bottom of a screen.
///
/// The material button widgets, [ElevatedButton], [TextButton], and
/// [OutlinedButton], are an alternative to action chips, which should appear
/// statically and consistently in a UI.
///
/// Requires one of its ancestors to be a [Material] widget.
///
37 38 39 40 41
/// {@tool dartpad}
/// This example shows how to create an [ActionChip] with a leading icon.
/// The icon is updated when the [ActionChip] is pressed.
///
/// ** See code in examples/api/lib/material/action_chip/action_chip.0.dart **
42 43
/// {@end-tool}
///
44 45 46 47 48 49
/// ## Material Design 3
///
/// [ActionChip] can be used for both the Assist and Suggestion chips from
/// Material Design 3. If [ThemeData.useMaterial3] is true, then [ActionChip]
/// will be styled to match the Material Design 3 Assist and Suggestion chips.
///
50 51 52 53 54 55 56 57 58 59 60 61
/// See also:
///
///  * [Chip], a chip that displays information and can be deleted.
///  * [InputChip], a chip that represents a complex piece of information, such
///    as an entity (person, place, or thing) or conversational text, in a
///    compact form.
///  * [ChoiceChip], allows a single selection from a set of options. Choice
///    chips contain related descriptive text or categories.
///  * [CircleAvatar], which shows images or initials of people.
///  * [Wrap], A widget that displays its children in multiple horizontal or
///    vertical runs.
///  * <https://material.io/design/components/chips.html>
62
class ActionChip extends StatelessWidget implements ChipAttributes, TappableChipAttributes, DisabledChipAttributes {
63 64 65 66 67 68
  /// Create a chip that acts like a button.
  ///
  /// The [label], [onPressed], [autofocus], and [clipBehavior] arguments must
  /// not be null. The [pressElevation] and [elevation] must be null or
  /// non-negative. Typically, [pressElevation] is greater than [elevation].
  const ActionChip({
69
    super.key,
70 71 72 73
    this.avatar,
    required this.label,
    this.labelStyle,
    this.labelPadding,
74
    this.onPressed,
75 76 77 78 79 80 81 82
    this.pressElevation,
    this.tooltip,
    this.side,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.backgroundColor,
83
    this.disabledColor,
84 85 86 87 88
    this.padding,
    this.visualDensity,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
89 90
    this.surfaceTintColor,
    this.iconTheme,
91
  }) : assert(pressElevation == null || pressElevation >= 0.0),
92
       assert(elevation == null || elevation >= 0.0);
93 94 95 96 97 98 99 100 101 102

  @override
  final Widget? avatar;
  @override
  final Widget label;
  @override
  final TextStyle? labelStyle;
  @override
  final EdgeInsetsGeometry? labelPadding;
  @override
103
  final VoidCallback? onPressed;
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
  @override
  final double? pressElevation;
  @override
  final String? tooltip;
  @override
  final BorderSide? side;
  @override
  final OutlinedBorder? shape;
  @override
  final Clip clipBehavior;
  @override
  final FocusNode? focusNode;
  @override
  final bool autofocus;
  @override
  final Color? backgroundColor;
  @override
121 122
  final Color? disabledColor;
  @override
123 124 125 126 127 128 129 130 131
  final EdgeInsetsGeometry? padding;
  @override
  final VisualDensity? visualDensity;
  @override
  final MaterialTapTargetSize? materialTapTargetSize;
  @override
  final double? elevation;
  @override
  final Color? shadowColor;
132 133 134 135 136 137 138
  @override
  final Color? surfaceTintColor;
  @override
  final IconThemeData? iconTheme;

  @override
  bool get isEnabled => onPressed != null;
139 140 141 142

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));
143
    final ChipThemeData? defaults = Theme.of(context).useMaterial3
144
      ? _ActionChipDefaultsM3(context, isEnabled)
145
      : null;
146
    return RawChip(
147
      defaultProperties: defaults,
148 149 150 151 152 153 154 155 156 157 158 159
      avatar: avatar,
      label: label,
      onPressed: onPressed,
      pressElevation: pressElevation,
      tooltip: tooltip,
      labelStyle: labelStyle,
      backgroundColor: backgroundColor,
      side: side,
      shape: shape,
      clipBehavior: clipBehavior,
      focusNode: focusNode,
      autofocus: autofocus,
160
      disabledColor: disabledColor,
161 162
      padding: padding,
      visualDensity: visualDensity,
163
      isEnabled: isEnabled,
164 165 166 167
      labelPadding: labelPadding,
      materialTapTargetSize: materialTapTargetSize,
      elevation: elevation,
      shadowColor: shadowColor,
168
      surfaceTintColor: surfaceTintColor,
169 170 171
    );
  }
}
172

173
// BEGIN GENERATED TOKEN PROPERTIES - ActionChip
174

175 176 177 178
// Do not edit by hand. The code between the "BEGIN GENERATED" and
// "END GENERATED" comments are generated from data in the Material
// Design token database by the script:
//   dev/tools/gen_defaults/bin/gen_defaults.dart.
179

180
// Token database version: v0_162
181 182

class _ActionChipDefaultsM3 extends ChipThemeData {
183
  _ActionChipDefaultsM3(this.context, this.isEnabled)
184 185
    : super(
        elevation: 0.0,
186
        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
187 188 189 190 191
        showCheckmark: true,
      );

  final BuildContext context;
  final bool isEnabled;
192 193
  late final ColorScheme _colors = Theme.of(context).colorScheme;
  late final TextTheme _textTheme = Theme.of(context).textTheme;
194 195

  @override
196
  TextStyle? get labelStyle => _textTheme.labelLarge;
197 198 199 200 201

  @override
  Color? get backgroundColor => null;

  @override
202
  Color? get shadowColor => Colors.transparent;
203 204

  @override
205
  Color? get surfaceTintColor => _colors.surfaceTint;
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220

  @override
  Color? get selectedColor => null;

  @override
  Color? get checkmarkColor => null;

  @override
  Color? get disabledColor => null;

  @override
  Color? get deleteIconColor => null;

  @override
  BorderSide? get side => isEnabled
221 222
    ? BorderSide(color: _colors.outline)
    : BorderSide(color: _colors.onSurface.withOpacity(0.12));
223 224 225 226

  @override
  IconThemeData? get iconTheme => IconThemeData(
    color: isEnabled
227 228
      ? _colors.primary
      : _colors.onSurface,
229 230 231 232 233 234 235 236 237 238 239 240 241 242
    size: 18.0,
  );

  @override
  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);

  /// The chip at text scale 1 starts with 8px on each side and as text scaling
  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
  /// Once the widget has a text scaling of 2 or higher than the label padding
  /// remains 4px.
  @override
  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
    const EdgeInsets.symmetric(horizontal: 8.0),
    const EdgeInsets.symmetric(horizontal: 4.0),
243
    clampDouble(MediaQuery.textScaleFactorOf(context) - 1.0, 0.0, 1.0),
244 245 246
  )!;
}

247
// END GENERATED TOKEN PROPERTIES - ActionChip