blob: e8b6186fc7f760ee4122cfd93efd0efa411f8d2d [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.
// @dart = 2.8
import 'dart:math' as math;
import 'dart:ui' show lerpDouble;
import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'button_style.dart';
import 'button_style_button.dart';
import 'color_scheme.dart';
import 'constants.dart';
import 'elevated_button_theme.dart';
import 'material_state.dart';
import 'theme.dart';
import 'theme_data.dart';
/// A Material Design "elevated button".
///
/// Use elevated buttons to add dimension to otherwise mostly flat
/// layouts, e.g. in long busy lists of content, or in wide
/// spaces. Avoid using elevated buttons on already-elevated content
/// such as dialogs or cards.
///
/// An elevated button is a label [child] displayed on a [Material]
/// widget whose [Material.elevation] increases when the button is
/// pressed. The label's [Text] and [Icon] widgets are displayed in
/// [style]'s [ButtonStyle.foregroundColor] and the button's filled
/// background is the [ButtonStyle.backgroundColor].
///
/// The elevated button's default style is defined by
/// [defaultStyleOf]. The style of this elevated button can be
/// overridden with its [style] parameter. The style of all contained
/// buttons in a subtree can be overridden with the
/// [ElevatedButtonTheme], and the style of all of the contained
/// buttons in an app can be overridden with the [Theme]'s
/// [ThemeData.elevatedButtonTheme] property.
///
/// The static [styleFrom] method is a convenient way to create a
/// elevated button [ButtonStyle] from simple values.
///
/// If [onPressed] and [onLongPress] callbacks are null, then the
/// button will be disabled.
///
/// See also:
///
/// * [TextButton], a simple flat button without a shadow.
/// * [OutlinedButton], a [TextButton] with a border outline.
/// * <https://material.io/design/components/buttons.html>
class ElevatedButton extends ButtonStyleButton {
/// Create an ElevatedButton.
///
/// The [autofocus] and [clipBehavior] arguments must not be null.
const ElevatedButton({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
@required Widget child,
}) : super(
key: key,
onPressed: onPressed,
onLongPress: onLongPress,
style: style,
focusNode: focusNode,
autofocus: autofocus,
clipBehavior: clipBehavior,
child: child,
);
/// Create an elevated 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 12 logical pixels
/// at the start, and 16 at the end, with an 8 pixel gap in between.
///
/// The [icon] and [label] arguments must not be null.
factory ElevatedButton.icon({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus,
Clip clipBehavior,
@required Widget icon,
@required Widget label,
}) = _ElevatedButtonWithIcon;
/// A static convenience method that constructs an elevated button
/// [ButtonStyle] given simple values.
///
/// The [onPrimary], and [onSurface] colors are used to to create a
/// [MaterialStateProperty] [ButtonStyle.foregroundColor] value in the same
/// way that [defaultStyleOf] uses the [ColorScheme] colors with the same
/// names. Specify a value for [onPrimary] 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 [primary] for the button's background
/// fill color and [onSurface] to specify the button's disabled text, icon,
/// and fill color.
///
/// The button's elevations are defined relative to the [elevation]
/// parameter. The disabled elevation is the same as the parameter
/// value, [elevation] + 2 is used when the button is hovered
/// or focused, and elevation + 6 is used when the button is pressed.
///
/// Similarly, the [enabledMouseCursor] and [disabledMouseCursor]
/// parameters are used to construct [ButtonStyle].mouseCursor.
///
/// 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
/// [ElevatedButton], as well as its overlay color, with all of the
/// standard opacity adjustments for the pressed, focused, and
/// hovered states, one could write:
///
/// ```dart
/// ElevatedButton(
/// style: TextButton.styleFrom(primary: Colors.green),
/// )
/// ```
static ButtonStyle styleFrom({
Color primary,
Color onPrimary,
Color onSurface,
Color shadowColor,
double elevation,
TextStyle textStyle,
EdgeInsetsGeometry padding,
Size minimumSize,
BorderSide side,
OutlinedBorder shape,
MouseCursor enabledMouseCursor,
MouseCursor disabledMouseCursor,
VisualDensity visualDensity,
MaterialTapTargetSize tapTargetSize,
Duration animationDuration,
bool enableFeedback,
}) {
final MaterialStateProperty<Color> backgroundColor = (onSurface == null && primary == null)
? null
: _ElevatedButtonDefaultBackground(primary, onSurface);
final MaterialStateProperty<Color> foregroundColor = (onSurface == null && onPrimary == null)
? null
: _ElevatedButtonDefaultForeground(onPrimary, onSurface);
final MaterialStateProperty<Color> overlayColor = (onPrimary == null)
? null
: _ElevatedButtonDefaultOverlay(onPrimary);
final MaterialStateProperty<double> elevationValue = (elevation == null)
? null
: _ElevatedButtonDefaultElevation(elevation);
final MaterialStateProperty<MouseCursor> mouseCursor = (enabledMouseCursor == null && disabledMouseCursor == null)
? null
: _ElevatedButtonDefaultMouseCursor(enabledMouseCursor, disabledMouseCursor);
return ButtonStyle(
textStyle: MaterialStateProperty.all<TextStyle>(textStyle),
backgroundColor: backgroundColor,
foregroundColor: foregroundColor,
overlayColor: overlayColor,
shadowColor: ButtonStyleButton.allOrNull<Color>(shadowColor),
elevation: elevationValue,
padding: ButtonStyleButton.allOrNull<EdgeInsetsGeometry>(padding),
minimumSize: ButtonStyleButton.allOrNull<Size>(minimumSize),
side: ButtonStyleButton.allOrNull<BorderSide>(side),
shape: ButtonStyleButton.allOrNull<OutlinedBorder>(shape),
mouseCursor: mouseCursor,
visualDensity: visualDensity,
tapTargetSize: tapTargetSize,
animationDuration: animationDuration,
enableFeedback: enableFeedback,
);
}
/// 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.
///
/// 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
/// properties that are not followed by by a sublist have the same
/// 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.
///
/// The color of the [ButtonStyle.textStyle] is not used, the
/// [ButtonStyle.foregroundColor] color is used instead.
///
/// * `textStyle` - Theme.textTheme.button
/// * `backgroundColor`
/// * disabled - Theme.colorScheme.onSurface(0.12)
/// * others - Theme.colorScheme.primary
/// * `foregroundColor`
/// * disabled - Theme.colorScheme.onSurface(0.38)
/// * others - Theme.colorScheme.onPrimary
/// * `overlayColor`
/// * hovered - Theme.colorScheme.onPrimary(0.08)
/// * focused or pressed - Theme.colorScheme.onPrimary(0.24)
/// * `shadowColor` - Theme.shadowColor
/// * `elevation`
/// * disabled - 0
/// * hovered or focused - 2
/// * pressed - 6
/// * `padding`
/// * textScaleFactor <= 1 - horizontal(16)
/// * `1 < textScaleFactor <= 2` - lerp(horizontal(16), horizontal(8))
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
/// * `3 < textScaleFactor` - horizontal(4)
/// * `minimumSize` - Size(64, 36)
/// * `side` - BorderSide.none
/// * `shape` - RoundedRectangleBorder(borderRadius: BorderRadius.circular(4))
/// * `mouseCursor`
/// * disabled - SystemMouseCursors.forbidden
/// * others - SystemMouseCursors.click
/// * `visualDensity` - theme.visualDensity
/// * `tapTargetSize` - theme.materialTapTargetSize
/// * `animationDuration` - kThemeChangeDuration
/// * `enableFeedback` - true
///
/// The default padding values for the [ElevatedButton.icon] factory are slightly different:
///
/// * `padding`
/// * `textScaleFactor <= 1` - start(12) end(16)
/// * `1 < textScaleFactor <= 2` - lerp(start(12) end(16), horizontal(8))
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
/// * `3 < textScaleFactor` - horizontal(4)
@override
ButtonStyle defaultStyleOf(BuildContext context) {
final ThemeData theme = Theme.of(context);
final ColorScheme colorScheme = theme.colorScheme;
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
const EdgeInsets.symmetric(horizontal: 16),
const EdgeInsets.symmetric(horizontal: 8),
const EdgeInsets.symmetric(horizontal: 4),
MediaQuery.of(context, nullOk: true)?.textScaleFactor ?? 1,
);
return styleFrom(
primary: colorScheme.primary,
onPrimary: colorScheme.onPrimary,
onSurface: colorScheme.onSurface,
shadowColor: theme.shadowColor,
elevation: 2,
textStyle: theme.textTheme.button,
padding: scaledPadding,
minimumSize: const Size(64, 36),
side: BorderSide.none,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
enabledMouseCursor: SystemMouseCursors.click,
disabledMouseCursor: SystemMouseCursors.forbidden,
visualDensity: theme.visualDensity,
tapTargetSize: theme.materialTapTargetSize,
animationDuration: kThemeChangeDuration,
enableFeedback: true,
);
}
/// Returns the [ElevatedButtonThemeData.style] of the closest
/// [ElevatedButtonTheme] ancestor.
@override
ButtonStyle themeStyleOf(BuildContext context) {
return ElevatedButtonTheme.of(context)?.style;
}
}
@immutable
class _ElevatedButtonDefaultBackground extends MaterialStateProperty<Color> with Diagnosticable {
_ElevatedButtonDefaultBackground(this.primary, this.onSurface);
final Color primary;
final Color onSurface;
@override
Color resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled))
return onSurface?.withOpacity(0.12);
return primary;
}
}
@immutable
class _ElevatedButtonDefaultForeground extends MaterialStateProperty<Color> with Diagnosticable {
_ElevatedButtonDefaultForeground(this.onPrimary, this.onSurface);
final Color onPrimary;
final Color onSurface;
@override
Color resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled))
return onSurface?.withOpacity(0.38);
return onPrimary;
}
}
@immutable
class _ElevatedButtonDefaultOverlay extends MaterialStateProperty<Color> with Diagnosticable {
_ElevatedButtonDefaultOverlay(this.onPrimary);
final Color onPrimary;
@override
Color resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered))
return onPrimary?.withOpacity(0.08);
if (states.contains(MaterialState.focused) || states.contains(MaterialState.pressed))
return onPrimary?.withOpacity(0.24);
return null;
}
}
@immutable
class _ElevatedButtonDefaultElevation extends MaterialStateProperty<double> with Diagnosticable {
_ElevatedButtonDefaultElevation(this.elevation);
final double elevation;
@override
double resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled))
return 0;
if (states.contains(MaterialState.hovered))
return elevation + 2;
if (states.contains(MaterialState.focused))
return elevation + 2;
if (states.contains(MaterialState.pressed))
return elevation + 6;
return elevation;
}
}
@immutable
class _ElevatedButtonDefaultMouseCursor extends MaterialStateProperty<MouseCursor> with Diagnosticable {
_ElevatedButtonDefaultMouseCursor(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 _ElevatedButtonWithIcon extends ElevatedButton {
_ElevatedButtonWithIcon({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus,
Clip clipBehavior,
@required Widget icon,
@required Widget label,
}) : assert(icon != null),
assert(label != null),
super(
key: key,
onPressed: onPressed,
onLongPress: onLongPress,
style: style,
focusNode: focusNode,
autofocus: autofocus ?? false,
clipBehavior: clipBehavior ?? Clip.none,
child: _ElevatedButtonWithIconChild(icon: icon, label: label),
);
@override
ButtonStyle defaultStyleOf(BuildContext context) {
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
const EdgeInsetsDirectional.fromSTEB(12, 0, 16, 0),
const EdgeInsets.symmetric(horizontal: 8),
const EdgeInsetsDirectional.fromSTEB(8, 0, 4, 0),
MediaQuery.of(context, nullOk: true)?.textScaleFactor ?? 1,
);
return super.defaultStyleOf(context).copyWith(
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(scaledPadding)
);
}
}
class _ElevatedButtonWithIconChild extends StatelessWidget {
const _ElevatedButtonWithIconChild({ Key key, this.label, this.icon }) : super(key: key);
final Widget label;
final Widget icon;
@override
Widget build(BuildContext context) {
final double scale = MediaQuery.of(context, nullOk: true)?.textScaleFactor ?? 1;
final double gap = scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1));
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[icon, SizedBox(width: gap), label],
);
}
}
/// Please use [ElevatedButton].
@Deprecated(
'This class was briefly released with the wrong name. The correct name is ElevatedButton. '
'This feature was deprecated after v1.20.0-2.0.pre.'
)
class ContainedButton extends ElevatedButton {
/// Please use [new ElevatedButton].
const ContainedButton({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
@required Widget child,
}) : super(
key: key,
onPressed: onPressed,
onLongPress: onLongPress,
style: style,
focusNode: focusNode,
autofocus: autofocus,
clipBehavior: clipBehavior,
child: child,
);
/// Please use [new ElevatedButton.icon].
factory ContainedButton.icon({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus,
Clip clipBehavior,
@required Widget icon,
@required Widget label,
}) = _ContainedButtonWithIcon;
/// Please use [ElevatedButton.styleFrom].
static ButtonStyle styleFrom({
Color primary,
Color onPrimary,
Color onSurface,
Color shadowColor,
double elevation,
TextStyle textStyle,
EdgeInsetsGeometry padding,
Size minimumSize,
BorderSide side,
OutlinedBorder shape,
MouseCursor enabledMouseCursor,
MouseCursor disabledMouseCursor,
VisualDensity visualDensity,
MaterialTapTargetSize tapTargetSize,
Duration animationDuration,
bool enableFeedback,
}) {
return ElevatedButton.styleFrom(
primary: primary,
onPrimary: onPrimary,
onSurface: onSurface,
shadowColor: shadowColor,
elevation: elevation,
textStyle: textStyle,
padding: padding,
minimumSize: minimumSize,
side: side,
shape: shape,
enabledMouseCursor: enabledMouseCursor,
disabledMouseCursor: disabledMouseCursor,
visualDensity: visualDensity,
tapTargetSize: tapTargetSize,
animationDuration: animationDuration,
enableFeedback: enableFeedback,
);
}
}
class _ContainedButtonWithIcon extends ContainedButton {
_ContainedButtonWithIcon({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus,
Clip clipBehavior,
@required Widget icon,
@required Widget label,
}) : assert(icon != null),
assert(label != null),
super(
key: key,
onPressed: onPressed,
onLongPress: onLongPress,
style: style,
focusNode: focusNode,
autofocus: autofocus ?? false,
clipBehavior: clipBehavior ?? Clip.none,
child: _ContainedButtonWithIconChild(icon: icon, label: label),
);
@override
ButtonStyle defaultStyleOf(BuildContext context) {
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
const EdgeInsetsDirectional.fromSTEB(12, 0, 16, 0),
const EdgeInsets.symmetric(horizontal: 8),
const EdgeInsetsDirectional.fromSTEB(8, 0, 4, 0),
MediaQuery.of(context, nullOk: true)?.textScaleFactor ?? 1,
);
return super.defaultStyleOf(context).copyWith(
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(scaledPadding)
);
}
}
class _ContainedButtonWithIconChild extends StatelessWidget {
const _ContainedButtonWithIconChild({ Key key, this.label, this.icon }) : super(key: key);
final Widget label;
final Widget icon;
@override
Widget build(BuildContext context) {
final double scale = MediaQuery.of(context, nullOk: true)?.textScaleFactor ?? 1;
final double gap = scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1));
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[icon, SizedBox(width: gap), label],
);
}
}