blob: a6bbb3430b56cd3ff22dd4d8bf8281a737a179b9 [file] [log] [blame]
// 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.
import 'package:flutter/foundation.dart' show clampDouble;
import 'package:flutter/widgets.dart';
import 'chip.dart';
import 'chip_theme.dart';
import 'color_scheme.dart';
import 'colors.dart';
import 'debug.dart';
import 'text_theme.dart';
import 'theme.dart';
import 'theme_data.dart';
/// A Material Design action chip.
/// 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
/// confirmation. For Material 3, a disabled state is supported for Action
/// chips and is specified with [onPressed] being null. For previous versions
/// of Material Design, it is recommended to remove the Action chip from
/// the interface entirely rather than display a disabled chip.
/// 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.
/// {@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 **
/// {@end-tool}
/// ## 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.
/// 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.
/// * <>
class ActionChip extends StatelessWidget implements ChipAttributes, TappableChipAttributes, DisabledChipAttributes {
/// 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({
required this.label,
this.clipBehavior = Clip.none,
this.autofocus = false,
}) : assert(pressElevation == null || pressElevation >= 0.0),
assert(elevation == null || elevation >= 0.0);
final Widget? avatar;
final Widget label;
final TextStyle? labelStyle;
final EdgeInsetsGeometry? labelPadding;
final VoidCallback? onPressed;
final double? pressElevation;
final String? tooltip;
final BorderSide? side;
final OutlinedBorder? shape;
final Clip clipBehavior;
final FocusNode? focusNode;
final bool autofocus;
final Color? backgroundColor;
final Color? disabledColor;
final EdgeInsetsGeometry? padding;
final VisualDensity? visualDensity;
final MaterialTapTargetSize? materialTapTargetSize;
final double? elevation;
final Color? shadowColor;
final Color? surfaceTintColor;
final IconThemeData? iconTheme;
bool get isEnabled => onPressed != null;
Widget build(BuildContext context) {
final ChipThemeData? defaults = Theme.of(context).useMaterial3
? _ActionChipDefaultsM3(context, isEnabled)
: null;
return RawChip(
defaultProperties: defaults,
avatar: avatar,
label: label,
onPressed: onPressed,
pressElevation: pressElevation,
tooltip: tooltip,
labelStyle: labelStyle,
backgroundColor: backgroundColor,
side: side,
shape: shape,
clipBehavior: clipBehavior,
focusNode: focusNode,
autofocus: autofocus,
disabledColor: disabledColor,
padding: padding,
visualDensity: visualDensity,
isEnabled: isEnabled,
labelPadding: labelPadding,
materialTapTargetSize: materialTapTargetSize,
elevation: elevation,
shadowColor: shadowColor,
surfaceTintColor: surfaceTintColor,
// 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.
// Token database version: v0_162
class _ActionChipDefaultsM3 extends ChipThemeData {
_ActionChipDefaultsM3(this.context, this.isEnabled)
: super(
elevation: 0.0,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
showCheckmark: true,
final BuildContext context;
final bool isEnabled;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
TextStyle? get labelStyle => _textTheme.labelLarge;
Color? get backgroundColor => null;
Color? get shadowColor => Colors.transparent;
Color? get surfaceTintColor => _colors.surfaceTint;
Color? get selectedColor => null;
Color? get checkmarkColor => null;
Color? get disabledColor => null;
Color? get deleteIconColor => null;
BorderSide? get side => isEnabled
? BorderSide(color: _colors.outline)
: BorderSide(color: _colors.onSurface.withOpacity(0.12));
IconThemeData? get iconTheme => IconThemeData(
color: isEnabled
? _colors.primary
: _colors.onSurface,
size: 18.0,
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.
EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
const EdgeInsets.symmetric(horizontal: 8.0),
const EdgeInsets.symmetric(horizontal: 4.0),
clampDouble(MediaQuery.textScaleFactorOf(context) - 1.0, 0.0, 1.0),