text_button.dart 15.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// 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 'dart:math' as math;
import 'dart:ui' show lerpDouble;

import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';

import 'button_style.dart';
import 'button_style_button.dart';
import 'color_scheme.dart';
import 'colors.dart';
import 'constants.dart';
16 17
import 'ink_ripple.dart';
import 'ink_well.dart';
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
import 'material_state.dart';
import 'text_button_theme.dart';
import 'theme.dart';
import 'theme_data.dart';

/// A Material Design "Text Button".
///
/// Use text buttons on toolbars, in dialogs, or inline with other
/// content but offset from that content with padding so that the
/// button's presence is obvious. Text buttons do not have visible
/// borders and must therefore rely on their position relative to
/// other content for context. In dialogs and cards, they should be
/// grouped together in one of the bottom corners. Avoid using text
/// buttons where they would blend in with other content, for example
/// in the middle of lists.
///
/// A text button is a label [child] displayed on a (zero elevation)
/// [Material] widget. The label's [Text] and [Icon] widgets are
/// displayed in the [style]'s [ButtonStyle.foregroundColor]. The
/// button reacts to touches by filling with the [style]'s
/// [ButtonStyle.backgroundColor].
///
/// The text button's default style is defined by [defaultStyleOf].
/// The style of this text button can be overridden with its [style]
/// parameter. The style of all text buttons in a subtree can be
/// overridden with the [TextButtonTheme] and the style of all of the
/// text buttons in an app can be overridden with the [Theme]'s
/// [ThemeData.textButtonTheme] property.
///
/// The static [styleFrom] method is a convenient way to create a
/// text button [ButtonStyle] from simple values.
///
/// If the [onPressed] and [onLongPress] callbacks are null, then this
/// button will be disabled, it will not react to touch.
///
53
/// {@tool dartpad}
54 55 56
/// This sample shows how to render a disabled TextButton, an enabled TextButton
/// and lastly a TextButton with gradient background.
///
57
/// ** See code in examples/api/lib/material/text_button/text_button.0.dart **
58 59
/// {@end-tool}
///
60 61 62
/// See also:
///
///  * [OutlinedButton], a [TextButton] with a border outline.
63
///  * [ElevatedButton], a filled button whose material elevates when pressed.
64 65 66 67 68 69
///  * <https://material.io/design/components/buttons.html>
class TextButton extends ButtonStyleButton {
  /// Create a TextButton.
  ///
  /// The [autofocus] and [clipBehavior] arguments must not be null.
  const TextButton({
70 71 72
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
73 74
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
75 76
    ButtonStyle? style,
    FocusNode? focusNode,
77 78
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
79
    required Widget child,
80 81 82 83
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
84 85
    onHover: onHover,
    onFocusChange: onFocusChange,
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

  /// Create a text button from a pair of widgets that serve as the button's
  /// [icon] and [label].
  ///
  /// The icon and label are arranged in a row and padded by 8 logical pixels
  /// at the ends, with an 8 pixel gap in between.
  ///
  /// The [icon] and [label] arguments must not be null.
  factory TextButton.icon({
101 102 103
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
104 105
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
106 107 108 109
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
110 111
    required Widget icon,
    required Widget label,
112 113 114 115 116
  }) = _TextButtonWithIcon;

  /// A static convenience method that constructs a text button
  /// [ButtonStyle] given simple values.
  ///
Jan Mewes's avatar
Jan Mewes committed
117
  /// The [primary], and [onSurface] colors are used to create a
118 119 120 121 122 123
  /// [MaterialStateProperty] [ButtonStyle.foregroundColor] value in the same
  /// way that [defaultStyleOf] uses the [ColorScheme] colors with the same
  /// names. Specify a value for [primary] to specify the color of the button's
  /// text and icons as well as the overlay colors used to indicate the hover,
  /// focus, and pressed states. Use [onSurface] to specify the button's
  /// disabled text and icon color.
124 125
  ///
  /// Similarly, the [enabledMouseCursor] and [disabledMouseCursor]
126
  /// parameters are used to construct [ButtonStyle.mouseCursor].
127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
  ///
  /// All of the other parameters are either used directly or used to
  /// create a [MaterialStateProperty] with a single value for all
  /// states.
  ///
  /// All parameters default to null. By default this method returns
  /// a [ButtonStyle] that doesn't override anything.
  ///
  /// For example, to override the default text and icon colors for a
  /// [TextButton], as well as its overlay color, with all of the
  /// standard opacity adjustments for the pressed, focused, and
  /// hovered states, one could write:
  ///
  /// ```dart
  /// TextButton(
  ///   style: TextButton.styleFrom(primary: Colors.green),
  /// )
  /// ```
  static ButtonStyle styleFrom({
146 147 148 149 150 151 152 153
    Color? primary,
    Color? onSurface,
    Color? backgroundColor,
    Color? shadowColor,
    double? elevation,
    TextStyle? textStyle,
    EdgeInsetsGeometry? padding,
    Size? minimumSize,
154
    Size? fixedSize,
155
    Size? maximumSize,
156 157 158 159 160 161 162 163
    BorderSide? side,
    OutlinedBorder? shape,
    MouseCursor? enabledMouseCursor,
    MouseCursor? disabledMouseCursor,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? tapTargetSize,
    Duration? animationDuration,
    bool? enableFeedback,
164
    AlignmentGeometry? alignment,
165
    InteractiveInkFeatureFactory? splashFactory,
166
  }) {
167
    final MaterialStateProperty<Color?>? foregroundColor = (onSurface == null && primary == null)
168 169
      ? null
      : _TextButtonDefaultForeground(primary, onSurface);
170
    final MaterialStateProperty<Color?>? overlayColor = (primary == null)
171 172
      ? null
      : _TextButtonDefaultOverlay(primary);
173
    final MaterialStateProperty<MouseCursor>? mouseCursor = (enabledMouseCursor == null && disabledMouseCursor == null)
174
      ? null
175
      : _TextButtonDefaultMouseCursor(enabledMouseCursor!, disabledMouseCursor!);
176 177 178 179 180 181 182 183 184 185

    return ButtonStyle(
      textStyle: ButtonStyleButton.allOrNull<TextStyle>(textStyle),
      backgroundColor: ButtonStyleButton.allOrNull<Color>(backgroundColor),
      foregroundColor: foregroundColor,
      overlayColor: overlayColor,
      shadowColor: ButtonStyleButton.allOrNull<Color>(shadowColor),
      elevation: ButtonStyleButton.allOrNull<double>(elevation),
      padding: ButtonStyleButton.allOrNull<EdgeInsetsGeometry>(padding),
      minimumSize: ButtonStyleButton.allOrNull<Size>(minimumSize),
186
      fixedSize: ButtonStyleButton.allOrNull<Size>(fixedSize),
187
      maximumSize: ButtonStyleButton.allOrNull<Size>(maximumSize),
188 189 190 191 192 193 194
      side: ButtonStyleButton.allOrNull<BorderSide>(side),
      shape: ButtonStyleButton.allOrNull<OutlinedBorder>(shape),
      mouseCursor: mouseCursor,
      visualDensity: visualDensity,
      tapTargetSize: tapTargetSize,
      animationDuration: animationDuration,
      enableFeedback: enableFeedback,
195
      alignment: alignment,
196
      splashFactory: splashFactory,
197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213
    );
  }

  /// Defines the button's default appearance.
  ///
  /// The button [child]'s [Text] and [Icon] widgets are rendered with
  /// the [ButtonStyle]'s foreground color. The button's [InkWell] adds
  /// the style's overlay color when the button is focused, hovered
  /// or pressed. The button's background color becomes its [Material]
  /// color and is transparent by default.
  ///
  /// All of the ButtonStyle's defaults appear below.
  ///
  /// In this list "Theme.foo" is shorthand for
  /// `Theme.of(context).foo`. Color scheme values like
  /// "onSurface(0.38)" are shorthand for
  /// `onSurface.withOpacity(0.38)`. [MaterialStateProperty] valued
nt4f04uNd's avatar
nt4f04uNd committed
214
  /// properties that are not followed by a sublist have the same
215 216 217 218 219 220 221 222
  /// value for all states, otherwise the values are as specified for
  /// each state and "others" means all other states.
  ///
  /// The `textScaleFactor` is the value of
  /// `MediaQuery.of(context).textScaleFactor` and the names of the
  /// EdgeInsets constructors and `EdgeInsetsGeometry.lerp` have been
  /// abbreviated for readability.
  ///
223 224
  /// The color of the [ButtonStyle.textStyle] is not used, the
  /// [ButtonStyle.foregroundColor] color is used instead.
225 226 227 228 229 230 231 232 233
  ///
  /// * `textStyle` - Theme.textTheme.button
  /// * `backgroundColor` - transparent
  /// * `foregroundColor`
  ///   * disabled - Theme.colorScheme.onSurface(0.38)
  ///   * others - Theme.colorScheme.primary
  /// * `overlayColor`
  ///   * hovered - Theme.colorScheme.primary(0.04)
  ///   * focused or pressed - Theme.colorScheme.primary(0.12)
234
  /// * `shadowColor` - Theme.shadowColor
235 236 237 238 239 240 241
  /// * `elevation` - 0
  /// * `padding`
  ///   * `textScaleFactor <= 1` - all(8)
  ///   * `1 < textScaleFactor <= 2` - lerp(all(8), horizontal(8))
  ///   * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
  ///   * `3 < textScaleFactor` - horizontal(4)
  /// * `minimumSize` - Size(64, 36)
242
  /// * `fixedSize` - null
243
  /// * `maximumSize` - Size.infinite
244
  /// * `side` - null
245 246
  /// * `shape` - RoundedRectangleBorder(borderRadius: BorderRadius.circular(4))
  /// * `mouseCursor`
247
  ///   * disabled - SystemMouseCursors.basic
248 249 250 251 252
  ///   * others - SystemMouseCursors.click
  /// * `visualDensity` - theme.visualDensity
  /// * `tapTargetSize` - theme.materialTapTargetSize
  /// * `animationDuration` - kThemeChangeDuration
  /// * `enableFeedback` - true
253
  /// * `alignment` - Alignment.center
254
  /// * `splashFactory` - InkRipple.splashFactory
255 256 257 258 259 260 261
  ///
  /// The default padding values for the [TextButton.icon] factory are slightly different:
  ///
  /// * `padding`
  ///   * `textScaleFactor <= 1` - all(8)
  ///   * `1 < textScaleFactor <= 2 `- lerp(all(8), horizontal(4))
  ///   * `2 < textScaleFactor` - horizontal(4)
262 263 264 265 266
  ///
  /// The default value for `side`, which defines the appearance of the button's
  /// outline, is null. That means that the outline is defined by the button
  /// shape's [OutlinedBorder.side]. Typically the default value of an
  /// [OutlinedBorder]'s side is [BorderSide.none], so an outline is not drawn.
267 268
  @override
  ButtonStyle defaultStyleOf(BuildContext context) {
269
    final ThemeData theme = Theme.of(context);
270 271 272 273 274 275
    final ColorScheme colorScheme = theme.colorScheme;

    final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
      const EdgeInsets.all(8),
      const EdgeInsets.symmetric(horizontal: 8),
      const EdgeInsets.symmetric(horizontal: 4),
276
      MediaQuery.maybeOf(context)?.textScaleFactor ?? 1,
277 278 279 280 281 282
    );

    return styleFrom(
      primary: colorScheme.primary,
      onSurface: colorScheme.onSurface,
      backgroundColor: Colors.transparent,
283
      shadowColor: theme.shadowColor,
284 285 286 287
      elevation: 0,
      textStyle: theme.textTheme.button,
      padding: scaledPadding,
      minimumSize: const Size(64, 36),
288
      maximumSize: Size.infinite,
289 290
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
      enabledMouseCursor: SystemMouseCursors.click,
291
      disabledMouseCursor: SystemMouseCursors.basic,
292 293 294 295
      visualDensity: theme.visualDensity,
      tapTargetSize: theme.materialTapTargetSize,
      animationDuration: kThemeChangeDuration,
      enableFeedback: true,
296
      alignment: Alignment.center,
297
      splashFactory: InkRipple.splashFactory,
298 299 300 301 302 303
    );
  }

  /// Returns the [TextButtonThemeData.style] of the closest
  /// [TextButtonTheme] ancestor.
  @override
304 305
  ButtonStyle? themeStyleOf(BuildContext context) {
    return TextButtonTheme.of(context).style;
306 307 308 309
  }
}

@immutable
310
class _TextButtonDefaultForeground extends MaterialStateProperty<Color?> {
311 312
  _TextButtonDefaultForeground(this.primary, this.onSurface);

313 314
  final Color? primary;
  final Color? onSurface;
315 316

  @override
317
  Color? resolve(Set<MaterialState> states) {
318 319 320 321 322 323 324 325 326 327 328 329
    if (states.contains(MaterialState.disabled))
      return onSurface?.withOpacity(0.38);
    return primary;
  }

  @override
  String toString() {
    return '{disabled: ${onSurface?.withOpacity(0.38)}, otherwise: $primary}';
  }
}

@immutable
330
class _TextButtonDefaultOverlay extends MaterialStateProperty<Color?> {
331 332 333 334 335
  _TextButtonDefaultOverlay(this.primary);

  final Color primary;

  @override
336
  Color? resolve(Set<MaterialState> states) {
337
    if (states.contains(MaterialState.hovered))
338
      return primary.withOpacity(0.04);
339
    if (states.contains(MaterialState.focused) || states.contains(MaterialState.pressed))
340
      return primary.withOpacity(0.12);
341 342 343 344 345
    return null;
  }

  @override
  String toString() {
346
    return '{hovered: ${primary.withOpacity(0.04)}, focused,pressed: ${primary.withOpacity(0.12)}, otherwise: null}';
347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366
  }
}

@immutable
class _TextButtonDefaultMouseCursor extends MaterialStateProperty<MouseCursor> with Diagnosticable {
  _TextButtonDefaultMouseCursor(this.enabledCursor, this.disabledCursor);

  final MouseCursor enabledCursor;
  final MouseCursor disabledCursor;

  @override
  MouseCursor resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.disabled))
      return disabledCursor;
    return enabledCursor;
  }
}

class _TextButtonWithIcon extends TextButton {
  _TextButtonWithIcon({
367 368 369
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
370 371
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
372 373 374 375 376 377
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
    required Widget icon,
    required Widget label,
378 379 380 381 382 383
  }) : assert(icon != null),
       assert(label != null),
       super(
         key: key,
         onPressed: onPressed,
         onLongPress: onLongPress,
384 385
         onHover: onHover,
         onFocusChange: onFocusChange,
386 387 388 389 390 391 392 393 394 395 396 397 398
         style: style,
         focusNode: focusNode,
         autofocus: autofocus ?? false,
         clipBehavior: clipBehavior ?? Clip.none,
         child: _TextButtonWithIconChild(icon: icon, label: label),
      );

  @override
  ButtonStyle defaultStyleOf(BuildContext context) {
    final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
      const EdgeInsets.all(8),
      const EdgeInsets.symmetric(horizontal: 4),
      const EdgeInsets.symmetric(horizontal: 4),
399
      MediaQuery.maybeOf(context)?.textScaleFactor ?? 1,
400 401
    );
    return super.defaultStyleOf(context).copyWith(
402
      padding: MaterialStateProperty.all<EdgeInsetsGeometry>(scaledPadding),
403 404 405 406 407
    );
  }
}

class _TextButtonWithIconChild extends StatelessWidget {
408 409 410 411 412
  const _TextButtonWithIconChild({
    Key? key,
    required this.label,
    required this.icon,
  }) : super(key: key);
413 414 415 416 417 418

  final Widget label;
  final Widget icon;

  @override
  Widget build(BuildContext context) {
419
    final double scale = MediaQuery.maybeOf(context)?.textScaleFactor ?? 1;
420
    final double gap = scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1))!;
421 422
    return Row(
      mainAxisSize: MainAxisSize.min,
423
      children: <Widget>[icon, SizedBox(width: gap), Flexible(child: label)],
424 425 426
    );
  }
}