Skip to content

F
Front-End
Unverified Commit f5dea932 authored by Hans Muller's avatar Hans Muller Committed by GitHub
Browse files
Options

Material button update (#14410)

parent 5b46e0a4
Show whitespace changes
Inline Side-by-side
Showing with 1165 additions and 376 deletions
packages/flutter/lib/material.dart
View file @ f5dea932
......@@ -24,6 +24,7 @@ export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
......
packages/flutter/lib/src/material/button.dart
View file @ f5dea932
......@@ -5,136 +5,201 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'constants.dart';
import 'debug.dart';
import 'flat_button.dart';
import 'ink_well.dart';
import 'material.dart';
import 'raised_button.dart';
import 'theme.dart';
/// Whether a button should use the accent color for its text.
/// Creates a button based on [Semantics], [Material], and [InkWell]
/// widgets.
///
/// See also:
/// This class does not use the current [Theme] or [ButtonTheme] to
/// compute default values for unspecified parameters. It's intended to
/// be used for custom Material buttons that optionally incorporate defaults
/// from the themes or from app-specific sources.
///
/// * [ButtonTheme], which uses this enum to define the [ButtonTheme.textTheme].
/// * [RaisedButton], which styles itself based on the ambient [ButtonTheme].
/// * [FlatButton], which styles itself based on the ambient [ButtonTheme].
enum ButtonTextTheme {
/// The button should use the normal color (e.g., black or white depending on
/// the [ThemeData.brightness]) for its text.
normal,
/// The button should use the accent color (e.g., [ThemeData.accentColor]) for
/// its text.
accent,
}
/// Defines the button color used by a widget subtree.
///
/// See also:
///
/// * [ButtonTextTheme], which is used by [textTheme].
/// * [RaisedButton], which styles itself based on the ambient [ButtonTheme].
/// * [FlatButton], which styles itself based on the ambient [ButtonTheme].
class ButtonTheme extends InheritedWidget {
/// Creates a button theme.
///
/// The child argument is required.
const ButtonTheme({
Key key,
this.textTheme: ButtonTextTheme.normal,
this.minWidth: 88.0,
this.height: 36.0,
this.padding: const EdgeInsets.symmetric(horizontal: 16.0),
Widget child
}) : super(key: key, child: child);
/// Creates a button theme that is appropriate for button bars, as used in
/// dialog footers and in the headers of data tables.
///
/// This theme is denser, with a smaller [minWidth] and [padding], than the
/// default theme. Also, this theme uses [ButtonTextTheme.accent] rather than
/// [ButtonTextTheme.normal].
///
/// For best effect, the label of the button at the edge of the container
/// should have text that ends up wider than 64.0 pixels. This ensures that
/// the alignment of the text matches the alignment of the edge of the
/// container.
///
/// For example, buttons at the bottom of [Dialog] or [Card] widgets use this
/// button theme.
const ButtonTheme.bar({
/// [RaisedButton] and [FlatButton] configure a [RawMaterialButton] based
/// on the current [Theme] and [ButtonTheme].
class RawMaterialButton extends StatefulWidget {
/// Create a button based on [Semantics], [Material], and [InkWell] widgets.
///
/// The [shape], [elevation], [padding], and [constraints] arguments
/// must not be null.
const RawMaterialButton({
Key key,
this.textTheme: ButtonTextTheme.accent,
this.minWidth: 64.0,
this.height: 36.0,
this.padding: const EdgeInsets.symmetric(horizontal: 8.0),
Widget child
}) : super(key: key, child: child);
/// The button color that this subtree should use.
final ButtonTextTheme textTheme;
@required this.onPressed,
this.textStyle,
this.fillColor,
this.highlightColor,
this.splashColor,
this.elevation: 2.0,
this.highlightElevation: 8.0,
this.disabledElevation: 0.0,
this.padding: EdgeInsets.zero,
this.constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0),
this.shape: const RoundedRectangleBorder(),
this.child,
}) : assert(shape != null),
assert(elevation != null),
assert(highlightElevation != null),
assert(disabledElevation != null),
assert(padding != null),
assert(constraints != null),
super(key: key);
/// Called when the button is tapped or otherwise activated.
///
/// If this is set to null, the button will be disabled, see [enabled].
final VoidCallback onPressed;
/// The smallest horizontal extent that the button will occupy.
/// Defines the default text style, with [Material.textStyle], for the
/// button's [child].
final TextStyle textStyle;
/// The color of the button's [Material].
final Color fillColor;
/// The highlight color for the button's [InkWell].
final Color highlightColor;
/// The splash color for the button's [InkWell].
final Color splashColor;
/// The elevation for the button's [Material] when the button
/// is [enabled] but not pressed.
///
/// Defaults to 88.0 logical pixels.
final double minWidth;
/// Defaults to 2.0.
///
/// See also:
///
/// * [highlightElevation], the default elevation.
/// * [disabledElevation], the elevation when the button is disabled.
final double elevation;
/// The vertical extent of the button.
/// The elevation for the button's [Material] when the button
/// is [enabled] and pressed.
///
/// Defaults to 36.0 logical pixels.
final double height;
/// Defaults to 8.0.
///
/// See also:
///
/// * [elevation], the default elevation.
/// * [disabledElevation], the elevation when the button is disabled.
final double highlightElevation;
/// The amount of space to surround the child inside the bounds of the button.
/// The elevation for the button's [Material] when the button
/// is not [enabled].
///
/// Defaults to 16.0 pixels of horizontal padding.
/// Defaults to 0.0.
///
/// * [elevation], the default elevation.
/// * [highlightElevation], the elevation when the button is pressed.
final double disabledElevation;
/// The internal padding for the button's [child].
final EdgeInsetsGeometry padding;
/// The closest instance of this class that encloses the given context.
/// Defines the button's size.
///
/// Typical usage is as follows:
/// Typically used to constrain the button's minimum size.
final BoxConstraints constraints;
/// The shape of the button's [Material].
///
/// ```dart
/// ButtonTheme theme = ButtonTheme.of(context);
/// ```
static ButtonTheme of(BuildContext context) {
final ButtonTheme result = context.inheritFromWidgetOfExactType(ButtonTheme);
return result ?? const ButtonTheme();
/// The button's highlight and splash are clipped to this shape. If the
/// button has an elevation, then its drop shadow is defined by this shape.
final ShapeBorder shape;
/// Typically the button's label.
final Widget child;
/// Whether the button is enabled or disabled.
///
/// Buttons are disabled by default. To enable a button, set its [onPressed]
/// property to a non-null value.
bool get enabled => onPressed != null;
@override
_RawMaterialButtonState createState() => new _RawMaterialButtonState();
}
class _RawMaterialButtonState extends State<RawMaterialButton> {
bool _highlight = false;
void _handleHighlightChanged(bool value) {
setState(() {
_highlight = value;
});
}
@override
bool updateShouldNotify(ButtonTheme oldTheme) {
return textTheme != oldTheme.textTheme
|| padding != oldTheme.padding
|| minWidth != oldTheme.minWidth
|| height != oldTheme.height;
Widget build(BuildContext context) {
final double elevation = widget.enabled
? (_highlight ? widget.highlightElevation : widget.elevation)
: widget.disabledElevation;
return new Semantics(
container: true,
button: true,
enabled: widget.enabled,
child: new ConstrainedBox(
constraints: widget.constraints,
child: new Material(
elevation: elevation,
textStyle: widget.textStyle,
shape: widget.shape,
color: widget.fillColor,
type: widget.fillColor == null ? MaterialType.transparency : MaterialType.button,
child: new InkWell(
onHighlightChanged: _handleHighlightChanged,
splashColor: widget.splashColor,
highlightColor: widget.highlightColor,
onTap: widget.onPressed,
child: IconTheme.merge(
data: new IconThemeData(color: widget.textStyle?.color),
child: new Container(
padding: widget.padding,
child: new Center(
widthFactor: 1.0,
heightFactor: 1.0,
child: widget.child,
),
),
),
),
),
),
);
}
}
/// The framework for building material design buttons.
/// A utility class for building Material buttons that depend on the
/// ambient [ButtonTheme] and [Theme].
///
/// The button's size will expand to fit the child widget, if necessary.
///
/// MaterialButtons whose [onPressed] handler is null will be disabled. To have
/// an enabled button, make sure to pass a non-null value for onPressed.
///
/// Rather than using this class directly, consider using [FlatButton] or
/// [RaisedButton], which configure this class with appropriate defaults that
/// match the material design specification.
///
/// MaterialButtons whose [onPressed] handler is null will be disabled. To have
/// an enabled button, make sure to pass a non-null value for onPressed.
/// To create a button directly, without inheriting theme defaults, use
/// [RawMaterialButton].
///
/// If you want an ink-splash effect for taps, but don't want to use a button,
/// consider using [InkWell] directly.
///
/// The button will expand to fit the child widget, if necessary.
///
/// See also:
///
/// * [IconButton], to create buttons that contain icons rather than text.
class MaterialButton extends StatefulWidget {
class MaterialButton extends StatelessWidget {
/// Creates a material button.
///
/// Rather than creating a material button directly, consider using
/// [FlatButton] or [RaisedButton].
/// [FlatButton] or [RaisedButton]. To create a custom Material button
/// consider using [RawMaterialButton].
const MaterialButton({
Key key,
this.colorBrightness,
......@@ -157,15 +222,14 @@ class MaterialButton extends StatefulWidget {
/// Defaults to the brightness from [ThemeData.brightness].
final Brightness colorBrightness;
/// The color scheme to use for this button's text.
///
/// Defaults to the button color from [ButtonTheme].
/// Defines the button's base colors, and the defaults for the button's minimum
/// size, internal padding, and shape.
final ButtonTextTheme textTheme;
/// The color to use for this button's text.
final Color textColor;
/// The primary color of the button, as printed on the [Material], while it
/// The the button's fill color, displayed by its [Material], while the button
/// is in its default (unpressed, enabled) state.
///
/// Defaults to null, meaning that the color is automatically derived from the [Theme].
......@@ -238,9 +302,10 @@ class MaterialButton extends StatefulWidget {
/// Defaults to the value from the current [ButtonTheme].
final double height;
/// The amount of space to surround the child inside the bounds of the button.
/// The internal padding for the button's [child].
///
/// Defaults to the value from the current [ButtonTheme].
/// Defaults to the value from the current [ButtonTheme],
/// [ButtonThemeData.padding].
final EdgeInsetsGeometry padding;
/// The callback that is called when the button is tapped or otherwise activated.
......@@ -257,112 +322,67 @@ class MaterialButton extends StatefulWidget {
/// enable a button, set its [onPressed] property to a non-null value.
bool get enabled => onPressed != null;
@override
_MaterialButtonState createState() => new _MaterialButtonState();
Brightness _getBrightness(ThemeData theme) {
return colorBrightness ?? theme.brightness;
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder description) {
super.debugFillProperties(description);
description.add(new FlagProperty('enabled', value: enabled, ifFalse: 'disabled'));
ButtonTextTheme _getTextTheme(ButtonThemeData buttonTheme) {
return textTheme ?? buttonTheme.textTheme;
}
}
class _MaterialButtonState extends State<MaterialButton> {
bool _highlight = false;
Color _getTextColor(ThemeData theme, ButtonThemeData buttonTheme, Color fillColor) {
if (textColor != null)
return textColor;
Brightness get _colorBrightness {
return widget.colorBrightness ?? Theme.of(context).brightness;
}
final bool themeIsDark = _getBrightness(theme) == Brightness.dark;
final bool fillIsDark = fillColor != null
? ThemeData.estimateBrightnessForColor(fillColor) == Brightness.dark
: themeIsDark;
Color get _textColor {
if (widget.textColor != null)
return widget.textColor;
if (widget.enabled) {
switch (widget.textTheme ?? ButtonTheme.of(context).textTheme) {
case ButtonTextTheme.accent:
return Theme.of(context).accentColor;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
switch (_colorBrightness) {
case Brightness.light:
return Colors.black87;
case Brightness.dark:
return Colors.white;
}
}
} else {
assert(_colorBrightness != null);
switch (_colorBrightness) {
case Brightness.light:
return Colors.black26;
case Brightness.dark:
return Colors.white30;
}
return enabled
? (themeIsDark ? Colors.white : Colors.black87)
: (themeIsDark ? Colors.white30 : Colors.black26);
case ButtonTextTheme.accent:
return enabled
? theme.accentColor
: (themeIsDark ? Colors.white30 : Colors.black26);
case ButtonTextTheme.primary:
return enabled
? (fillIsDark ? Colors.white : Colors.black)
: (themeIsDark ? Colors.white30 : Colors.black38);
}
return null;
}
void _handleHighlightChanged(bool value) {
setState(() {
_highlight = value;
});
}
@override
Widget build(BuildContext context) {
assert(debugCheckHasMaterial(context));
final ThemeData theme = Theme.of(context);
final Color textColor = _textColor;
final TextStyle style = theme.textTheme.button.copyWith(color: textColor);
final ButtonTheme buttonTheme = ButtonTheme.of(context);
final double height = widget.height ?? buttonTheme.height;
final double elevation = (_highlight ? widget.highlightElevation : widget.elevation) ?? 0.0;
final bool hasColorOrElevation = (widget.color != null || elevation > 0);
Widget contents = IconTheme.merge(
data: new IconThemeData(
color: textColor
),
child: new InkWell(
borderRadius: hasColorOrElevation ? null : kMaterialEdges[MaterialType.button],
highlightColor: widget.highlightColor ?? theme.highlightColor,
splashColor: widget.splashColor ?? theme.splashColor,
onTap: widget.onPressed,
onHighlightChanged: _handleHighlightChanged,
child: new Container(
padding: widget.padding ?? ButtonTheme.of(context).padding,
child: new Center(
widthFactor: 1.0,
heightFactor: 1.0,
child: widget.child,
)
)
)
);
if (hasColorOrElevation) {
contents = new Material(
type: MaterialType.button,
color: widget.color,
elevation: elevation,
textStyle: style,
child: contents
);
} else {
contents = new AnimatedDefaultTextStyle(
style: style,
duration: kThemeChangeDuration,
child: contents
);
}
return new Semantics(
container: true,
button: true,
enabled: widget.enabled,
child: new ConstrainedBox(
constraints: new BoxConstraints(
minWidth: widget.minWidth ?? buttonTheme.minWidth,
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
final Color textColor = _getTextColor(theme, buttonTheme, color);
return new RawMaterialButton(
onPressed: onPressed,
fillColor: color,
textStyle: theme.textTheme.button.copyWith(color: textColor),
highlightColor: highlightColor ?? theme.highlightColor,
splashColor: splashColor ?? theme.splashColor,
elevation: elevation ?? 2.0,
highlightElevation: highlightElevation ?? 8.0,
padding: padding ?? buttonTheme.padding,
constraints: buttonTheme.constraints.copyWith(
minWidth: minWidth,
minHeight: height,
),
child: contents
),
shape: buttonTheme.shape,
child: child,
);
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder description) {
super.debugFillProperties(description);
description.add(new FlagProperty('enabled', value: enabled, ifFalse: 'disabled'));
}
}
packages/flutter/lib/src/material/button_bar.dart
View file @ f5dea932
......@@ -4,7 +4,7 @@
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_theme.dart';
import 'dialog.dart';
import 'flat_button.dart';
import 'raised_button.dart';
......
packages/flutter/lib/src/material/button_theme.dart 0 → 100644
View file @ f5dea932
// Copyright 2015 The Chromium 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';
import 'package:flutter/widgets.dart';
import 'theme.dart';
/// Used with [ButtonTheme] and [ButtonThemeData] to define a button's base
/// colors, and the defaults for the button's minimum size, internal padding,
/// and shape.
///
/// See also:
///
/// * [RaisedButton], which styles itself based on the ambient [ButtonTheme].
/// * [FlatButton], which styles itself based on the ambient [ButtonTheme].
enum ButtonTextTheme {
/// Button text is black or white depending on [ThemeData.brightness].
normal,
/// Button text is [ThemeData.accentColor].
accent,
/// Button text is based on [ThemeData.primaryColor].
primary,
}
/// Used with [ButtonThemeData] to configure the color and geometry of buttons.
///
/// A button theme can be specified as part of the overall Material theme
/// using [ThemeData.buttomTheme]. The Material theme's button theme data
/// can be overridden with [ButtonTheme].
///
/// The actual appearance of buttons depends on the button theme, the
/// button's enabled state, its elevation (if any) and the overall Material
/// theme.
///
/// See also:
///
/// * [FlatButton] and [RaisedButton], which are styled based on the
/// ambient button theme.
/// * [ThemeData.textTheme], `button` is the default text style for button labels.
/// * [ThemeData.buttonColor], the fill color for [RaisedButton]s unless the
/// button theme's text theme is [ButtonTextTheme.primary].
/// * [ThemeData.primaryColor], the fill or text color if a button theme's text
/// theme is [ButtonTextTheme.primary].
/// * [ThemeData.accentColor], the text color for buttons when button theme's
/// text theme is [ButtonTextTheme.accent].
/// * [ThemeData.disabled], the default text color for disabled buttons.
/// * [ThemeData.brightness], used to select contrasting text and fill colors.
/// * [ThemeData.highlightColor], a button [InkWell]'s default highlight color.
/// * [ThemeData.splashColor], a button [InkWell]'s default splash color.
/// * [RawMaterialButton], which can be used to configure a button that doesn't
/// depend on any inherited themes.
class ButtonTheme extends InheritedWidget {
/// Creates a button theme.
///
/// The [textTheme], [minWidth], and [height] arguments must not be null.
ButtonTheme({
Key key,
ButtonTextTheme textTheme: ButtonTextTheme.normal,
double minWidth: 88.0,
double height: 36.0,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Widget child,
}) : assert(textTheme != null),
assert(minWidth != null && minWidth >= 0.0),
assert(height != null && height >= 0.0),
data = new ButtonThemeData(
textTheme: textTheme,
minWidth: minWidth,
height: height,
padding: padding,
shape: shape,
),
super(key: key, child: child);
/// Creates a button theme that is appropriate for button bars, as used in
/// dialog footers and in the headers of data tables.
///
/// This theme is denser, with a smaller [minWidth] and [padding], than the
/// default theme. Also, this theme uses [ButtonTextTheme.accent] rather than
/// [ButtonTextTheme.normal].
///
/// For best effect, the label of the button at the edge of the container
/// should have text that ends up wider than 64.0 pixels. This ensures that
/// the alignment of the text matches the alignment of the edge of the
/// container.
///
/// For example, buttons at the bottom of [Dialog] or [Card] widgets use this
/// button theme.
ButtonTheme.bar({
Key key,
ButtonTextTheme textTheme: ButtonTextTheme.accent,
double minWidth: 64.0,
double height: 36.0,
EdgeInsetsGeometry padding: const EdgeInsets.symmetric(horizontal: 8.0),
ShapeBorder shape,
Widget child,
}) : assert(textTheme != null),
assert(minWidth != null && minWidth >= 0.0),
assert(height != null && height >= 0.0),
data = new ButtonThemeData(
textTheme: textTheme,
minWidth: minWidth,
height: height,
padding: padding,
shape: shape,
),
super(key: key, child: child);
/// Specifies the color and geometry of buttons.
final ButtonThemeData data;
/// The closest instance of this class that encloses the given context.
///
/// Typical usage is as follows:
///
/// ```dart
/// ButtonThemeData theme = ButtonTheme.of(context);
/// ```
static ButtonThemeData of(BuildContext context) {
final ButtonTheme result = context.inheritFromWidgetOfExactType(ButtonTheme);
return result?.data ?? Theme.of(context).buttonTheme;
}
@override
bool updateShouldNotify(ButtonTheme oldTheme) => data != oldTheme.data;
}
/// Used with [ButtonTheme] to configure the color and geometry of buttons.
///
/// A button theme can be specified as part of the overall Material theme
/// using [ThemeData.buttomTheme]. The Material theme's button theme data
/// can be overridden with [ButtonTheme].
class ButtonThemeData {
/// Create a button theme object that can be used with [ButtonTheme]
/// or [ThemeData].
///
/// The [textTheme], [minWidth], and [height] parameters must not be null.
const ButtonThemeData({
this.textTheme: ButtonTextTheme.normal,
this.minWidth: 88.0,
this.height: 36.0,
EdgeInsetsGeometry padding,
ShapeBorder shape,
}) : assert(textTheme != null),
assert(minWidth != null && minWidth >= 0.0),
assert(height != null && height >= 0.0),
_padding = padding,
_shape = shape;
/// The minimum width for buttons.
///
/// The actual horizontal space allocated for a button's child is
/// at least this value less the theme's horizontal [padding].
///
/// Defaults to 88.0 logical pixels.
final double minWidth;
/// The minimum height for buttons.
///
/// Defaults to 36.0 logical pixels.
final double height;
/// Defines a button's base colors, and the defaults for the button's minimum
/// size, internal padding, and shape.
final ButtonTextTheme textTheme;
/// Simply a convenience that returns [minWidth] and [height] as a
/// [BoxConstraints] object:
/// ```dart
/// return new BoxConstraints(
/// minWidth: minWidth,
/// minHeight: height,
/// );
/// ```
BoxConstraints get constraints {
return new BoxConstraints(
minWidth: minWidth,
minHeight: height,
);
}
/// Padding for a button's child (typically the button's label).
///
/// Defaults to 24.0 on the left and right if [textTheme] is
/// [ButtonTextTheme.primary], 16.0 on the left and right otherwise.
EdgeInsetsGeometry get padding {
if (_padding != null)
return _padding;
switch (textTheme) {
case ButtonTextTheme.normal:
case ButtonTextTheme.accent:
return const EdgeInsets.symmetric(horizontal: 16.0);
case ButtonTextTheme.primary:
return const EdgeInsets.symmetric(horizontal: 24.0);
}
return EdgeInsets.zero;
}
final EdgeInsetsGeometry _padding;
/// The shape of a button's material.
///
/// The button's highlight and splash are clipped to this shape. If the
/// button has an elevation, then its drop shadow is defined by this
/// shape as well.
///
/// Defaults to a rounded rectangle with circular corner radii of 4.0 if
/// [textTheme] is [ButtonTextTheme.primary], a rounded rectangle with
/// circular corner radii of 2.0 otherwise.
ShapeBorder get shape {
if (_shape != null)
return _shape;
switch (textTheme) {
case ButtonTextTheme.normal:
case ButtonTextTheme.accent:
return const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
);
case ButtonTextTheme.primary:
return const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(4.0)),
);
}
return const RoundedRectangleBorder();
}
final ShapeBorder _shape;
@override
bool operator ==(dynamic other) {
if (other.runtimeType != runtimeType)
return false;
final ButtonThemeData typedOther = other;
return textTheme == typedOther.textTheme
&& minWidth == typedOther.minWidth
&& height == typedOther.height
&& padding == typedOther.padding
&& shape == typedOther.shape;
}
@override
int get hashCode {
return hashValues(
textTheme,
minWidth,
height,
padding,
shape,
);
}
}
packages/flutter/lib/src/material/colors.dart
View file @ f5dea932
......@@ -336,6 +336,18 @@ class Colors {
/// but with different opacities.
static const Color white30 = const Color(0x4DFFFFFF);
/// White with 24% opacity.
///
/// ![](https://flutter.github.io/assets-for-api-docs/material/Colors.whites.png)
///
/// Used for the splash color for filled buttons.
///
/// See also:
///
/// * [white, white70, white30, white10], which are variants on this color
/// but with different opacities.
static const Color white24 = const Color(0x3DFFFFFF);
/// White with 12% opacity.
///
/// ![](https://flutter.github.io/assets-for-api-docs/material/Colors.whites.png)
......
packages/flutter/lib/src/material/date_picker.dart
View file @ f5dea932
......@@ -10,8 +10,8 @@ import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_bar.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'debug.dart';
import 'dialog.dart';
......
packages/flutter/lib/src/material/dialog.dart
View file @ f5dea932
......@@ -7,8 +7,8 @@ import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_bar.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'ink_well.dart';
import 'material.dart';
......
packages/flutter/lib/src/material/flat_button.dart
View file @ f5dea932
......@@ -6,12 +6,14 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'theme.dart';
/// A material design "flat button".
///
/// A flat button is a section printed on a [Material] widget that reacts to
/// touches by filling with color.
/// A flat button is a text label displayed on a (zero elevation) [Material]
/// widget that reacts to touches by filling with color.
///
/// Use flat buttons on toolbars, in dialogs, or inline with other content but
/// offset from that content with padding so that the button's presence is
......@@ -32,130 +34,148 @@ import 'theme.dart';
/// trying to change the button's [color] and it is not having any effect, check
/// that you are passing a non-null [onPressed] handler.
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// Flat buttons will expand to fit the child widget, if necessary.
///
/// ## Troubleshooting
///
/// ### Why does my button not have splash effects?
///
/// If you place a [FlatButton] on top of an [Image], [Container],
/// [DecoratedBox], or some other widget that draws an opaque background between
/// the [FlatButton] and its ancestor [Material], the splashes will not be
/// visible. This is because ink splashes draw in the [Material] itself, as if
/// the ink was spreading inside the material.
///
/// The [Ink] widget can be used as a replacement for [Image], [Container], or
/// [DecoratedBox] to ensure that the image or decoration also paints in the
/// [Material] itself, below the ink.
///
/// If this is not possible for some reason, e.g. because you are using an
/// opaque [CustomPaint] widget, alternatively consider using a second
/// [Material] above the opaque widget but below the [FlatButton] (as an
/// ancestor to the button). The [MaterialType.transparency] material kind can
/// be used for this purpose.
///
/// See also:
///
/// * [RaisedButton], which is a button that hovers above the containing
/// material.
/// * [RaisedButton], a filled button whose material elevates when pressed.
/// * [DropdownButton], which offers the user a choice of a number of options.
/// * [SimpleDialogOption], which is used in [SimpleDialog]s.
/// * [IconButton], to create buttons that just contain icons.
/// * [InkWell], which implements the ink splash part of a flat button.
//// * [RawMaterialButton], the widget this widget is based on.
/// * <https://material.google.com/components/buttons.html>
class FlatButton extends StatelessWidget {
/// Creates a flat button.
///
/// The [child] argument is required and is typically a [Text] widget in all
/// caps.
/// Create a simple text button.
const FlatButton({
Key key,
@required this.onPressed,
this.textTheme,
this.textColor,
this.disabledTextColor,
this.color,
this.disabledColor,
this.highlightColor,
this.splashColor,
this.disabledColor,
this.colorBrightness,
this.padding,
this.shape,
@required this.child,
}) : super(key: key);
/// 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 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.
FlatButton.icon({
Key key,
@required this.onPressed,
this.textTheme,
this.textColor,
this.disabledTextColor,
this.color,
this.disabledColor,
this.highlightColor,
this.splashColor,
this.colorBrightness,
@required this.child
}) : assert(child != null),
this.shape,
@required Widget icon,
@required Widget label,
}) : assert(icon != null),
assert(label != null),
padding = const EdgeInsetsDirectional.only(start: 12.0, end: 16.0),
child = new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
icon,
const SizedBox(width: 8.0),
label,
],
),
super(key: key);
/// The callback that is called when the button is tapped or otherwise
/// activated.
/// Called when the button is tapped or otherwise activated.
///
/// If this is set to null, the button will be disabled.
/// If this is set to null, the button will be disabled, see [enabled].
final VoidCallback onPressed;
/// Defines the button's base colors, and the defaults for the button's minimum
/// size, internal padding, and shape.
///
/// Defaults to `ButtonTheme.of(context).textTheme`.
final ButtonTextTheme textTheme;
/// The color to use for this button's text.
///
/// Defaults to the color determined by the [textTheme].
/// The button's [Material.textStyle] will be the current theme's button
/// text style, [ThemeData.textTheme.button], configured with this color.
///
/// The default text color depends on the button theme's text theme,
/// [ButtonThemeData.textTheme].
///
/// See also:
/// * [disabledTextColor], the text color to use when the button has been
/// disabled.
final Color textColor;
/// The color to use for this button's text when the button cannot be pressed.
/// The color to use for this button's text when the button is disabled.
///
/// The button's [Material.textStyle] will be the current theme's button
/// text style, [ThemeData.textTheme.button], configured with this color.
///
/// Defaults to a color derived from the [Theme].
/// The default value is the theme's disabled color,
/// [ThemeData.disabledColor].
///
/// See also:
/// * [textColor] - The color to use for this button's text when the button is [enabled].
final Color disabledTextColor;
/// The primary color of the button, as printed on the [Material], while it
/// The button's fill color, displayed by its [Material], while it
/// is in its default (unpressed, enabled) state.
///
/// Defaults to null, meaning that the color is automatically derived from the
/// [Theme].
///
/// Typically, a material design color will be used, as follows:
/// Typically not specified for [FlatButton]s.
///
/// ```dart
/// new FlatButton(
/// color: Colors.blue,
/// onPressed: _handleTap,
/// child: new Text('DEMO'),
/// ),
/// ```
/// The default is null.
final Color color;
/// The primary color of the button when the button is in the down (pressed)
/// state.
/// The fill color of the button when the button is disabled.
///
/// The splash is represented as a circular overlay that appears above the
/// [highlightColor] overlay. The splash overlay has a center point that
/// matches the hit point of the user touch event. The splash overlay will
/// expand to fill the button area if the touch is held for long enough time.
/// If the splash color has transparency then the highlight and button color
/// will show through.
/// Typically not specified for [FlatButton]s.
///
/// Defaults to the Theme's splash color, [ThemeData.splashColor].
final Color splashColor;
/// The default is null.
final Color disabledColor;
/// The secondary color of the button when the button is in the down (pressed)
/// state.
/// The splash color of the button's [InkWell].
///
/// The highlight color is represented as a solid color that is overlaid over
/// the button color (if any). If the highlight color has transparency, the
/// button color will show through. The highlight fades in quickly as the
/// button is held down.
/// The ink splash indicates that the button has been touched. It
/// appears on top of the button's child and spreads in an expanding
/// circle beginning where the touch occurred.
///
/// Defaults to the Theme's highlight color, [ThemeData.highlightColor].
final Color highlightColor;
/// The color of the button when the button is disabled.
/// If [textTheme] is [ButtonTextTheme.primary], the default splash color is
/// is based on the theme's primary color [ThemeData.primaryColor],
/// otherwise it's the current theme's splash color, [ThemeData.splashColor].
///
/// Buttons are disabled by default. To enable a button, set its [onPressed]
/// property to a non-null value.
final Color disabledColor;
/// The appearance of the splash can be configured with the theme's splash
/// factory, [ThemeData.splashFactory].
final Color splashColor;
/// The color scheme to use for this button's text.
/// The highlight color of the button's [InkWell].
///
/// Defaults to the button color from [ButtonTheme].
final ButtonTextTheme textTheme;
/// The highlight indicates that the button is actively being pressed. It
/// appears on top of the button's child and quickly spreads to fill
/// the button, and then fades out.
///
/// If [textTheme] is [ButtonTextTheme.primary], the default highlight color is
/// transparent (in other words the highlight doesn't appear). Otherwise it's
/// the current theme's highlight color, [ThemeData.highlightColor].
final Color highlightColor;
/// The theme brightness to use for this button.
///
/// Defaults to the brightness from [ThemeData.brightness].
/// Defaults to the theme's brightness, [ThemeData.brightness].
final Brightness colorBrightness;
/// The widget below this widget in the tree.
......@@ -169,17 +189,103 @@ class FlatButton extends StatelessWidget {
/// property to a non-null value.
bool get enabled => onPressed != null;
/// The internal padding for the button's [child].
///
/// Defaults to the value from the current [ButtonTheme],
/// [ButtonThemeData.padding].
final EdgeInsetsGeometry padding;
/// The shape of the button's [Material].
///
/// The button's highlight and splash are clipped to this shape. If the
/// button has an elevation, then its drop shadow is defined by this
/// shape as well.
final ShapeBorder shape;
Brightness _getBrightness(ThemeData theme) {
return colorBrightness ?? theme.brightness;
}
ButtonTextTheme _getTextTheme(ButtonThemeData buttonTheme) {
return textTheme ?? buttonTheme.textTheme;
}
Color _getTextColor(ThemeData theme, ButtonThemeData buttonTheme, Color fillColor) {
final Color color = enabled ? textColor : disabledTextColor;
if (color != null)
return color;
final bool themeIsDark = _getBrightness(theme) == Brightness.dark;
final bool fillIsDark = fillColor == null
? themeIsDark
: ThemeData.estimateBrightnessForColor(fillColor) == Brightness.dark;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
return enabled
? (themeIsDark ? Colors.white : Colors.black87)
: theme.disabledColor;
case ButtonTextTheme.accent:
return enabled
? theme.accentColor
: theme.disabledColor;
case ButtonTextTheme.primary:
return enabled
? (fillIsDark ? Colors.white : theme.primaryColor)
: (themeIsDark ? Colors.white30 : Colors.black38);
}
return null;
}
Color _getSplashColor(ThemeData theme, ButtonThemeData buttonTheme) {
if (splashColor != null)
return splashColor;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
case ButtonTextTheme.accent:
return theme.splashColor;
case ButtonTextTheme.primary:
return _getBrightness(theme) == Brightness.dark
? Colors.white12
: theme.primaryColor.withOpacity(0.12);
}
return Colors.transparent;
}
Color _getHighlightColor(ThemeData theme, ButtonThemeData buttonTheme) {
if (highlightColor != null)
return highlightColor;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
case ButtonTextTheme.accent:
return theme.highlightColor;
case ButtonTextTheme.primary:
return Colors.transparent;
}
return Colors.transparent;
}
@override
Widget build(BuildContext context) {
return new MaterialButton(
final ThemeData theme = Theme.of(context);
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
final Color fillColor = enabled ? color : disabledColor;
final Color textColor = _getTextColor(theme, buttonTheme, fillColor);
return new RawMaterialButton(
onPressed: onPressed,
textColor: enabled ? textColor : disabledTextColor,
color: enabled ? color : disabledColor,
highlightColor: highlightColor ?? Theme.of(context).highlightColor,
splashColor: splashColor ?? Theme.of(context).splashColor,
textTheme: textTheme,
colorBrightness: colorBrightness,
child: child
fillColor: fillColor,
textStyle: theme.textTheme.button.copyWith(color: textColor),
highlightColor: _getHighlightColor(theme, buttonTheme),
splashColor: _getSplashColor(theme, buttonTheme),
elevation: 0.0,
highlightElevation: 0.0,
padding: padding ?? buttonTheme.padding,
constraints: buttonTheme.constraints,
shape: shape ?? buttonTheme.shape,
child: child,
);
}
......@@ -187,11 +293,15 @@ class FlatButton extends StatelessWidget {
void debugFillProperties(DiagnosticPropertiesBuilder description) {
super.debugFillProperties(description);
description.add(new ObjectFlagProperty<VoidCallback>('onPressed', onPressed, ifNull: 'disabled'));
description.add(new DiagnosticsProperty<ButtonTextTheme>('textTheme', textTheme, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('textColor', textColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('disabledTextColor', disabledTextColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('color', color, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('disabledColor', disabledColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('highlightColor', highlightColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('splashColor', splashColor, defaultValue: null));
description.add(new DiagnosticsProperty<Brightness>('colorBrightness', colorBrightness, defaultValue: null));
description.add(new DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
description.add(new DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
}
}
packages/flutter/lib/src/material/ink_ripple.dart
View file @ f5dea932
......@@ -202,9 +202,10 @@ class InkRipple extends InteractiveInkFeature {
// Watch out: setting _fadeOutController's value to 1.0 would
// trigger a call to _handleAlphaStatusChanged() which would
// dispose _fadeOutController.
if (_fadeInController.value > 0.0) {
final double _fadeOutValue = 1.0 - _fadeInController.value;
if (_fadeOutValue < 1.0) {
_fadeOutController
..value = 1.0 - _fadeInController.value
..value = _fadeOutValue
..animateTo(1.0, duration: _kCancelDuration);
}
}
......
packages/flutter/lib/src/material/material.dart
View file @ f5dea932
......@@ -186,7 +186,7 @@ class Material extends StatefulWidget {
/// The z-coordinate at which to place this material. This controls the size
/// of the shadow below the material.
///
/// If this is non-zero, the contents of the card are clipped, because the
/// If this is non-zero, the contents of the material are clipped, because the
/// widget conceptually defines an independent printed piece of material.
///
/// Defaults to 0. Changing this value will cause the shadow to animate over
......@@ -209,12 +209,21 @@ class Material extends StatefulWidget {
/// The typographical style to use for text within this material.
final TextStyle textStyle;
/// Defines the material's shape as well its shadow.
///
/// If shape is non null, the [borderRadius] is ignored and the material's
/// clip boundary and shadow are defined by the shape.
///
/// A shadow is only displayed if the [elevation] is greater than
/// zero.
final ShapeBorder shape;
/// If non-null, the corners of this box are rounded by this [BorderRadius].
/// Otherwise, the corners specified for the current [type] of material are
/// used.
///
/// If [shape] is non null then the border radius is ignored.
///
/// Must be null if [type] is [MaterialType.circle].
final BorderRadius borderRadius;
......@@ -242,6 +251,7 @@ class Material extends StatefulWidget {
description.add(new DiagnosticsProperty<Color>('color', color, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('shadowColor', shadowColor, defaultValue: const Color(0xFF000000)));
textStyle?.debugFillProperties(description, prefix: 'textStyle.');
description.add(new DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
description.add(new EnumProperty<BorderRadius>('borderRadius', borderRadius, defaultValue: null));
}
......
packages/flutter/lib/src/material/paginated_data_table.dart
View file @ f5dea932
......@@ -8,8 +8,8 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/rendering.dart';
import 'button.dart';
import 'button_bar.dart';
import 'button_theme.dart';
import 'card.dart';
import 'data_table.dart';
import 'data_table_source.dart';
......
packages/flutter/lib/src/material/raised_button.dart
View file @ f5dea932
......@@ -6,25 +6,24 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'theme.dart';
/// A material design "raised button".
///
/// A raised button consists of a rectangular piece of material that hovers over
/// the interface.
/// A raised button is based on a [Material] widget whose [Material.elevation]
/// increases when the button is pressed.
///
/// Use raised buttons to add dimension to otherwise mostly flat layouts, e.g.
/// in long busy lists of content, or in wide spaces. Avoid using raised buttons
/// on already-raised content such as dialogs or cards.
///
/// If the [onPressed] callback is null, then the button will be disabled and by
/// default will appear like a flat button in the [disabledColor]. If you are
/// default will resemble a flat button in the [disabledColor]. If you are
/// trying to change the button's [color] and it is not having any effect, check
/// that you are passing a non-null [onPressed] handler.
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// If you want an ink-splash effect for taps, but don't want to use a button,
/// consider using [InkWell] directly.
///
......@@ -37,39 +36,119 @@ import 'theme.dart';
/// * [FloatingActionButton], the round button in material applications.
/// * [IconButton], to create buttons that just contain icons.
/// * [InkWell], which implements the ink splash part of a flat button.
//// * [RawMaterialButton], the widget this widget is based on.
/// * <https://material.google.com/components/buttons.html>
class RaisedButton extends StatelessWidget {
/// Creates a raised button.
/// Create a filled button.
///
/// The [child] argument is required and is typically a [Text] widget in all
/// caps.
/// The [elevation], [highlightElevation], and [disabledElevation]
/// arguments must not be null.
const RaisedButton({
Key key,
@required this.onPressed,
this.textTheme,
this.textColor,
this.disabledTextColor,
this.color,
this.disabledColor,
this.highlightColor,
this.splashColor,
this.disabledColor,
this.colorBrightness,
this.elevation: 2.0,
this.highlightElevation: 8.0,
this.disabledElevation: 0.0,
this.padding,
this.shape,
this.child,
}) : assert(elevation != null),
assert(highlightElevation != null),
assert(disabledElevation != null),
super(key: key);
/// Create a filled 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 [elevation], [highlightElevation], [disabledElevation], [icon], and
/// [label] arguments must not be null.
RaisedButton.icon({
Key key,
@required this.onPressed,
this.textTheme,
this.textColor,
this.disabledTextColor,
this.color,
this.disabledColor,
this.highlightColor,
this.splashColor,
this.colorBrightness,
this.child
}) : super(key: key);
this.elevation: 2.0,
this.highlightElevation: 8.0,
this.disabledElevation: 0.0,
this.shape,
@required Widget icon,
@required Widget label,
}) : assert(elevation != null),
assert(highlightElevation != null),
assert(disabledElevation != null),
assert(icon != null),
assert(label != null),
padding = const EdgeInsetsDirectional.only(start: 12.0, end: 16.0),
child = new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
icon,
const SizedBox(width: 8.0),
label,
],
),
super(key: key);
/// The callback that is called when the button is tapped or otherwise
/// activated.
/// Called when the button is tapped or otherwise activated.
///
/// If this is set to null, the button will be disabled.
/// If this is set to null, the button will be disabled, see [enabled].
final VoidCallback onPressed;
/// The primary color of the button, as printed on the [Material], while it
/// is in its default (unpressed, enabled) state.
/// Defines the button's base colors, and the defaults for the button's minimum
/// size, internal padding, and shape.
///
/// Defaults to `ButtonTheme.of(context).textTheme`.
final ButtonTextTheme textTheme;
/// The color to use for this button's text.
///
/// The button's [Material.textStyle] will be the current theme's button
/// text style, [ThemeData.textTheme.button], configured with this color.
///
/// The default text color depends on the button theme's text theme,
/// [ButtonThemeData.textTheme].
///
/// Defaults to null, meaning that the color is automatically derived from the
/// [Theme].
/// See also:
/// * [disabledTextColor], the text color to use when the button has been
/// disabled.
final Color textColor;
/// The color to use for this button's text when the button is disabled.
///
/// Typically, a material design color will be used, as follows:
/// The button's [Material.textStyle] will be the current theme's button
/// text style, [ThemeData.textTheme.button], configured with this color.
///
/// The default value is the theme's disabled color,
/// [ThemeData.disabledColor].
///
/// See also:
/// * [textColor] - The color to use for this button's text when the button is [enabled].
final Color disabledTextColor;
/// The button's fill color, displayed by its [Material], while it
/// is in its default (unpressed, [enabled]) state.
///
/// The default fill color is the theme's button color, [ThemeData.buttonColor].
///
/// Typically the default color will be overidden with a Material color,
/// for example:
///
/// ```dart
/// new RaisedButton(
......@@ -78,38 +157,43 @@ class RaisedButton extends StatelessWidget {
/// child: new Text('DEMO'),
/// ),
/// ```
///
/// See also:
/// * [disabledColor] - the fill color of the button when the button is disabled.
final Color color;
/// The primary color of the button when the button is in the down (pressed)
/// state.
/// The fill color of the button when the button is disabled.
///
/// The splash is represented as a circular overlay that appears above the
/// [highlightColor] overlay. The splash overlay has a center point that
/// matches the hit point of the user touch event. The splash overlay will
/// expand to fill the button area if the touch is held for long enough time.
/// If the splash color has transparency then the highlight and button color
/// will show through.
/// The default value of this color is the theme's disabled color,
/// [ThemeData.disabledColor].
///
/// Defaults to the splash color from the [Theme].
final Color splashColor;
/// See also:
/// * [color] - the fill color of the button when the button is [enabled].
final Color disabledColor;
/// The secondary color of the button when the button is in the down (pressed)
/// state.
/// The splash color of the button's [InkWell].
///
/// The highlight color is represented as a solid color that is overlaid over
/// the button color (if any). If the highlight color has transparency, the
/// button color will show through. The highlight fades in quickly as the
/// button is held down.
/// The ink splash indicates that the button has been touched. It
/// appears on top of the button's child and spreads in an expanding
/// circle beginning where the touch occurred.
///
/// Defaults to the highlight color from the [Theme].
final Color highlightColor;
/// The default splash color is the current theme's splash color,
/// [ThemeData.splashColor].
///
/// The appearance of the splash can be configured with the theme's splash
/// factory, [ThemeData.splashFactory].
final Color splashColor;
/// The color of the button when the button is disabled. Buttons are disabled
/// by default.
/// The highlight color of the button's [InkWell].
///
/// To enable a button, set its [onPressed] property to a non-null value.
final Color disabledColor;
/// The highlight indicates that the button is actively being pressed. It
/// appears on top of the button's child and quickly spreads to fill
/// the button, and then fades out.
///
/// If [textTheme] is [ButtonTextTheme.primary], the default highlight color is
/// transparent (in other words the highlight doesn't appear). Otherwise it's
/// the current theme's highlight color, [ThemeData.highlightColor].
final Color highlightColor;
/// The z-coordinate at which to place this button. This controls the size of
/// the shadow below the raised button.
......@@ -118,38 +202,55 @@ class RaisedButton extends StatelessWidget {
///
/// See also:
///
/// * [FlatButton], a button with no elevation.
/// * [FlatButton], a button with no elevation or fill color.
/// * [disabledElevation], the elevation when the button is disabled.
/// * [highlightElevation], the elevation when the button is pressed.
final double elevation;
/// The z-coordinate at which to place this button when highlighted. This
/// controls the size of the shadow below the raised button.
/// The elevation for the button's [Material] when the button
/// is [enabled] but not pressed.
///
/// Defaults to 8, the appropriate elevation for raised buttons while they are
/// being touched.
/// Defaults to 2.0.
///
/// See also:
///
/// * [highlightElevation], the default elevation.
/// * [disabledElevation], the elevation when the button is disabled.
/// The elevation for the button's [Material] when the button
/// is [enabled] and pressed.
///
/// This controls the size of the shadow below the button. When a tap
/// down gesture occurs within the button, its [InkWell] displays a
/// [highlightColor] "highlight".
///
/// Defaults to 8.0.
///
/// See also:
///
/// * [elevation], the default elevation.
/// * [disabledElevation], the elevation when the button is disabled.
final double highlightElevation;
/// The z-coordinate at which to place this button when disabled. This
/// controls the size of the shadow below the raised button.
/// The elevation for the button's [Material] when the button
/// is not [enabled].
///
/// Defaults to 0, the appropriate elevation for disabled raised buttons.
/// Defaults to 0.0.
///
/// See also:
///
/// * [elevation], the default elevation.
/// * [highlightElevation], the elevation when the button is pressed.
final double disabledElevation;
/// The theme brightness to use for this button.
///
/// Defaults to the brightness from [ThemeData.brightness].
/// Defaults to the theme's brightness, [ThemeData.brightness].
final Brightness colorBrightness;
/// The widget below this widget in the tree.
/// The button's label.
///
/// Typically a [Text] widget in all caps.
/// Often a [Text] widget in all caps.
final Widget child;
/// Whether the button is enabled or disabled.
......@@ -158,35 +259,126 @@ class RaisedButton extends StatelessWidget {
/// property to a non-null value.
bool get enabled => onPressed != null;
Color _getColor(BuildContext context) {
if (enabled) {
return color ?? Theme.of(context).buttonColor;
} else {
if (disabledColor != null)
return disabledColor;
final Brightness brightness = Theme.of(context).brightness;
assert(brightness != null);
switch (brightness) {
case Brightness.light:
return Colors.black12;
case Brightness.dark:
return Colors.white12;
/// The internal padding for the button's [child].
///
/// Defaults to the value from the current [ButtonTheme],
/// [ButtonThemeData.padding].
final EdgeInsetsGeometry padding;
/// The shape of the button's [Material].
///
/// The button's highlight and splash are clipped to this shape. If the
/// button has an elevation, then its drop shadow is defined by this
/// shape as well.
final ShapeBorder shape;
Brightness _getBrightness(ThemeData theme) {
return colorBrightness ?? theme.brightness;
}
ButtonTextTheme _getTextTheme(ButtonThemeData buttonTheme) {
return textTheme ?? buttonTheme.textTheme;
}
Color _getFillColor(ThemeData theme, ButtonThemeData buttonTheme) {
final Color fillColor = enabled ? color : disabledColor;
if (fillColor != null)
return fillColor;
final bool themeIsDark = _getBrightness(theme) == Brightness.dark;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
case ButtonTextTheme.accent:
return enabled
? theme.buttonColor
: theme.disabledColor;
case ButtonTextTheme.primary:
return enabled
? theme.buttonColor
: (themeIsDark ? Colors.white12 : Colors.black12);
}
return null;
}
Color _getTextColor(ThemeData theme, ButtonThemeData buttonTheme, Color fillColor) {
final Color color = enabled ? textColor : disabledTextColor;
if (color != null)
return color;
final bool themeIsDark = _getBrightness(theme) == Brightness.dark;
final bool fillIsDark = fillColor != null
? ThemeData.estimateBrightnessForColor(fillColor) == Brightness.dark
: themeIsDark;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
return enabled
? (themeIsDark ? Colors.white : Colors.black87)
: theme.disabledColor;
case ButtonTextTheme.accent:
return enabled
? theme.accentColor
: theme.disabledColor;
case ButtonTextTheme.primary:
return enabled
? (fillIsDark ? Colors.white : Colors.black)
: (themeIsDark ? Colors.white30 : Colors.black38);
}
return null;
}
Color _getHighlightColor(ThemeData theme, ButtonThemeData buttonTheme) {
if (highlightColor != null)
return highlightColor;
switch (_getTextTheme(buttonTheme)) {
case ButtonTextTheme.normal:
case ButtonTextTheme.accent:
return theme.highlightColor;
case ButtonTextTheme.primary:
return Colors.transparent;
}
return Colors.transparent;
}
@override
Widget build(BuildContext context) {
return new MaterialButton(
final ThemeData theme = Theme.of(context);
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
final Color fillColor = _getFillColor(theme, buttonTheme);
final Color textColor = _getTextColor(theme, buttonTheme, fillColor);
return new RawMaterialButton(
onPressed: onPressed,
color: _getColor(context),
highlightColor: highlightColor ?? Theme.of(context).highlightColor,
splashColor: splashColor ?? Theme.of(context).splashColor,
elevation: enabled ? elevation : disabledElevation,
highlightElevation: enabled ? highlightElevation : disabledElevation,
colorBrightness: colorBrightness,
fillColor: fillColor,
textStyle: theme.textTheme.button.copyWith(color: textColor),
highlightColor: _getHighlightColor(theme, buttonTheme),
splashColor: splashColor ?? theme.splashColor,
elevation: elevation,
highlightElevation: highlightElevation,
disabledElevation: disabledElevation,
padding: padding ?? buttonTheme.padding,
constraints: buttonTheme.constraints,
shape: shape ?? buttonTheme.shape,
child: child,
);
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder description) {
super.debugFillProperties(description);
description.add(new ObjectFlagProperty<VoidCallback>('onPressed', onPressed, ifNull: 'disabled'));
description.add(new DiagnosticsProperty<Color>('textColor', textColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('disabledTextColor', disabledTextColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('color', color, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('disabledColor', disabledColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('highlightColor', highlightColor, defaultValue: null));
description.add(new DiagnosticsProperty<Color>('splashColor', splashColor, defaultValue: null));
description.add(new DiagnosticsProperty<Brightness>('colorBrightness', colorBrightness, defaultValue: null));
description.add(new DiagnosticsProperty<double>('elevation', elevation, defaultValue: null));
description.add(new DiagnosticsProperty<double>('highlightElevation', highlightElevation, defaultValue: null));
description.add(new DiagnosticsProperty<double>('disabledElevation', disabledElevation, defaultValue: null));
description.add(new DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
description.add(new DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
}
}
packages/flutter/lib/src/material/scaffold.dart
View file @ f5dea932
......@@ -11,8 +11,8 @@ import 'package:flutter/widgets.dart';
import 'app_bar.dart';
import 'bottom_sheet.dart';
import 'button.dart';
import 'button_bar.dart';
import 'button_theme.dart';
import 'drawer.dart';
import 'flexible_space_bar.dart';
import 'material.dart';
......
packages/flutter/lib/src/material/snack_bar.dart
View file @ f5dea932
......@@ -5,7 +5,7 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_theme.dart';
import 'flat_button.dart';
import 'material.dart';
import 'scaffold.dart';
......
packages/flutter/lib/src/material/stepper.dart
View file @ f5dea932
......@@ -5,7 +5,7 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'debug.dart';
import 'flat_button.dart';
......
packages/flutter/lib/src/material/theme_data.dart
View file @ f5dea932
......@@ -7,6 +7,7 @@ import 'dart:ui' show Color, hashValues;
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'ink_splash.dart';
import 'ink_well.dart' show InteractiveInkFeatureFactory;
......@@ -90,6 +91,7 @@ class ThemeData {
Color unselectedWidgetColor,
Color disabledColor,
Color buttonColor,
ButtonThemeData buttonTheme,
Color secondaryHeaderColor,
Color textSelectionColor,
Color textSelectionHandleColor,
......@@ -128,6 +130,7 @@ class ThemeData {
unselectedWidgetColor ??= isDark ? Colors.white70 : Colors.black54;
disabledColor ??= isDark ? Colors.white30 : Colors.black26;
buttonColor ??= isDark ? primarySwatch[600] : Colors.grey[300];
buttonTheme ??= const ButtonThemeData();
// Spec doesn't specify a dark theme secondaryHeaderColor, this is a guess.
secondaryHeaderColor ??= isDark ? Colors.grey[700] : primarySwatch[50];
textSelectionColor ??= isDark ? accentColor : primarySwatch[200];
......@@ -168,6 +171,7 @@ class ThemeData {
unselectedWidgetColor: unselectedWidgetColor,
disabledColor: disabledColor,
buttonColor: buttonColor,
buttonTheme: buttonTheme,
secondaryHeaderColor: secondaryHeaderColor,
textSelectionColor: textSelectionColor,
textSelectionHandleColor: textSelectionHandleColor,
......@@ -210,6 +214,7 @@ class ThemeData {
@required this.unselectedWidgetColor,
@required this.disabledColor,
@required this.buttonColor,
@required this.buttonTheme,
@required this.secondaryHeaderColor,
@required this.textSelectionColor,
@required this.textSelectionHandleColor,
......@@ -241,7 +246,7 @@ class ThemeData {
assert(selectedRowColor != null),
assert(unselectedWidgetColor != null),
assert(disabledColor != null),
assert(buttonColor != null),
assert(buttonTheme != null),
assert(secondaryHeaderColor != null),
assert(textSelectionColor != null),
assert(textSelectionHandleColor != null),
......@@ -353,9 +358,13 @@ class ThemeData {
/// checked or unchecked).
final Color disabledColor;
/// The default color of the [Material] used in [RaisedButton]s.
/// The default fill color of the [Material] used in [RaisedButton]s.
final Color buttonColor;
/// Defines the default configuration of button widgets, like [RaisedButton]
/// and [FlatButton].
final ButtonThemeData buttonTheme;
/// The color of the header of a [PaginatedDataTable] when there are selected rows.
// According to the spec for data tables:
// https://material.google.com/components/data-tables.html#data-tables-tables-within-cards
......@@ -432,6 +441,7 @@ class ThemeData {
Color unselectedWidgetColor,
Color disabledColor,
Color buttonColor,
Color buttonTheme,
Color secondaryHeaderColor,
Color textSelectionColor,
Color textSelectionHandleColor,
......@@ -466,6 +476,7 @@ class ThemeData {
unselectedWidgetColor: unselectedWidgetColor ?? this.unselectedWidgetColor,
disabledColor: disabledColor ?? this.disabledColor,
buttonColor: buttonColor ?? this.buttonColor,
buttonTheme: buttonTheme ?? this.buttonTheme,
secondaryHeaderColor: secondaryHeaderColor ?? this.secondaryHeaderColor,
textSelectionColor: textSelectionColor ?? this.textSelectionColor,
textSelectionHandleColor: textSelectionHandleColor ?? this.textSelectionHandleColor,
......@@ -583,6 +594,7 @@ class ThemeData {
unselectedWidgetColor: Color.lerp(a.unselectedWidgetColor, b.unselectedWidgetColor, t),
disabledColor: Color.lerp(a.disabledColor, b.disabledColor, t),
buttonColor: Color.lerp(a.buttonColor, b.buttonColor, t),
buttonTheme: t < 0.5 ? a.buttonTheme : b.buttonTheme,
secondaryHeaderColor: Color.lerp(a.secondaryHeaderColor, b.secondaryHeaderColor, t),
textSelectionColor: Color.lerp(a.textSelectionColor, b.textSelectionColor, t),
textSelectionHandleColor: Color.lerp(a.textSelectionHandleColor, b.textSelectionHandleColor, t),
......@@ -623,6 +635,7 @@ class ThemeData {
(otherData.unselectedWidgetColor == unselectedWidgetColor) &&
(otherData.disabledColor == disabledColor) &&
(otherData.buttonColor == buttonColor) &&
(otherData.buttonTheme == buttonTheme) &&
(otherData.secondaryHeaderColor == secondaryHeaderColor) &&
(otherData.textSelectionColor == textSelectionColor) &&
(otherData.textSelectionHandleColor == textSelectionHandleColor) &&
......@@ -660,12 +673,13 @@ class ThemeData {
unselectedWidgetColor,
disabledColor,
buttonColor,
buttonTheme,
secondaryHeaderColor,
textSelectionColor,
textSelectionHandleColor,
backgroundColor,
accentColor,
hashValues( // Too many values.
accentColor,
accentColorBrightness,
indicatorColor,
dialogBackgroundColor,
......
packages/flutter/lib/src/material/time_picker.dart
View file @ f5dea932
......@@ -10,8 +10,8 @@ import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'button_bar.dart';
import 'button_theme.dart';
import 'colors.dart';
import 'dialog.dart';
import 'feedback.dart';
......
packages/flutter/test/material/button_theme_test.dart 0 → 100644
View file @ f5dea932
// Copyright 2018 The Chromium 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/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
test('ButtonThemeData defaults', () {
final ButtonThemeData theme = const ButtonThemeData();
expect(theme.textTheme, ButtonTextTheme.normal);
expect(theme.constraints, const BoxConstraints(minWidth: 88.0, minHeight: 36.0));
expect(theme.padding, const EdgeInsets.symmetric(horizontal: 16.0));
expect(theme.shape, const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
));
});
test('ButtonThemeData default overrides', () {
final ButtonThemeData theme = const ButtonThemeData(
textTheme: ButtonTextTheme.primary,
minWidth: 100.0,
height: 200.0,
padding: EdgeInsets.zero,
shape: const RoundedRectangleBorder(),
);
expect(theme.textTheme, ButtonTextTheme.primary);
expect(theme.constraints, const BoxConstraints(minWidth: 100.0, minHeight: 200.0));
expect(theme.padding, EdgeInsets.zero);
expect(theme.shape, const RoundedRectangleBorder());
});
testWidgets('ButtonTheme defaults', (WidgetTester tester) async {
ButtonTextTheme textTheme;
BoxConstraints constraints;
EdgeInsets padding;
ShapeBorder shape;
await tester.pumpWidget(
new ButtonTheme(
child: new Builder(
builder: (BuildContext context) {
final ButtonThemeData theme = ButtonTheme.of(context);
textTheme = theme.textTheme;
constraints = theme.constraints;
padding = theme.padding;
shape = theme.shape;
return new Container(
alignment: Alignment.topLeft,
child: const Directionality(
textDirection: TextDirection.ltr,
child: const FlatButton(
onPressed: null,
child: const Text('b'), // intrinsic width < minimum width
),
),
);
},
),
),
);
expect(textTheme, ButtonTextTheme.normal);
expect(constraints, const BoxConstraints(minWidth: 88.0, minHeight: 36.0));
expect(padding, const EdgeInsets.symmetric(horizontal: 16.0));
expect(shape, const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
));
expect(tester.widget<Material>(find.byType(Material)).shape, shape);
expect(tester.getSize(find.byType(Material)), const Size(88.0, 36.0));
});
testWidgets('Theme buttonTheme defaults', (WidgetTester tester) async {
final ThemeData lightTheme = new ThemeData.light();
ButtonTextTheme textTheme;
BoxConstraints constraints;
EdgeInsets padding;
ShapeBorder shape;
await tester.pumpWidget(
new Theme(
data: lightTheme.copyWith(
disabledColor: const Color(0xFF00FF00), // disabled RaisedButton fill color
textTheme: lightTheme.textTheme.copyWith(
button: lightTheme.textTheme.button.copyWith(
// The button's height will match because there's no
// vertical padding by default
fontSize: 48.0,
),
),
),
child: new Builder(
builder: (BuildContext context) {
final ButtonThemeData theme = ButtonTheme.of(context);
textTheme = theme.textTheme;
constraints = theme.constraints;
padding = theme.padding;
shape = theme.shape;
return new Container(
alignment: Alignment.topLeft,
child: const Directionality(
textDirection: TextDirection.ltr,
child: const RaisedButton(
onPressed: null,
child: const Text('b'), // intrinsic width < minimum width
),
),
);
},
),
),
);
expect(textTheme, ButtonTextTheme.normal);
expect(constraints, const BoxConstraints(minWidth: 88.0, minHeight: 36.0));
expect(padding, const EdgeInsets.symmetric(horizontal: 16.0));
expect(shape, const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
));
expect(tester.widget<Material>(find.byType(Material)).shape, shape);
expect(tester.widget<Material>(find.byType(Material)).color, const Color(0xFF00FF00));
expect(tester.getSize(find.byType(Material)), const Size(88.0, 48.0));
});
testWidgets('Theme buttonTheme ButtonTheme overrides', (WidgetTester tester) async {
ButtonTextTheme textTheme;
BoxConstraints constraints;
EdgeInsets padding;
ShapeBorder shape;
await tester.pumpWidget(
new Theme(
data: new ThemeData.light().copyWith(
buttonColor: const Color(0xFF00FF00), // enabled RaisedButton fill color
),
child: new ButtonTheme(
textTheme: ButtonTextTheme.primary,
minWidth: 100.0,
height: 200.0,
padding: EdgeInsets.zero,
shape: const RoundedRectangleBorder(),
child: new Builder(
builder: (BuildContext context) {
final ButtonThemeData theme = ButtonTheme.of(context);
textTheme = theme.textTheme;
constraints = theme.constraints;
padding = theme.padding;
shape = theme.shape;
return new Container(
alignment: Alignment.topLeft,
child: new Directionality(
textDirection: TextDirection.ltr,
child: new RaisedButton(
onPressed: () { },
child: const Text('b'), // intrinsic width < minimum width
),
),
);
},
),
),
),
);
expect(textTheme, ButtonTextTheme.primary);
expect(constraints, const BoxConstraints(minWidth: 100.0, minHeight: 200.0));
expect(padding, EdgeInsets.zero);
expect(shape, const RoundedRectangleBorder());
expect(tester.widget<Material>(find.byType(Material)).shape, shape);
expect(tester.widget<Material>(find.byType(Material)).color, const Color(0xFF00FF00));
expect(tester.getSize(find.byType(Material)), const Size(100.0, 200.0));
});
}
packages/flutter/test/material/buttons_test.dart
View file @ f5dea932
......@@ -203,8 +203,9 @@ void main() {
expect(
Material.of(tester.element(find.byType(MaterialButton))),
paints
..clipRRect(rrect: new RRect.fromLTRBR(356.0, 282.0, 444.0, 318.0, const Radius.circular(2.0)))
..circle(color: directSplashColor)
..rrect(color: directHighlightColor)
..rect(color: directHighlightColor)
);
const Color themeSplashColor1 = const Color(0xFF001100);
......@@ -234,8 +235,9 @@ void main() {
expect(
Material.of(tester.element(find.byType(MaterialButton))),
paints
..clipRRect(rrect: new RRect.fromLTRBR(356.0, 282.0, 444.0, 318.0, const Radius.circular(2.0)))
..circle(color: themeSplashColor1)
..rrect(color: themeHighlightColor1)
..rect(color: themeHighlightColor1)
);
const Color themeSplashColor2 = const Color(0xFF002200);
......@@ -258,7 +260,7 @@ void main() {
Material.of(tester.element(find.byType(MaterialButton))),
paints
..circle(color: themeSplashColor2)
..rrect(color: themeHighlightColor2)
..rect(color: themeHighlightColor2)
);
await gesture.up();
......@@ -342,5 +344,4 @@ void main() {
semantics.dispose();
});
}
packages/flutter/test/material/debug_test.dart
View file @ f5dea932
......@@ -7,12 +7,10 @@ import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('debugCheckHasMaterial control test', (WidgetTester tester) async {
await tester.pumpWidget(const FlatButton(
onPressed: null,
child: const Text('Go'),
));
await tester.pumpWidget(const ListTile());
final dynamic exception = tester.takeException();
expect(exception, isFlutterError);
expect(exception.toString(), endsWith(':\n FlatButton(disabled)\n [root]'));
expect(exception.toString(), startsWith('No Material widget found.'));
expect(exception.toString(), endsWith(':\n ListTile\nThe ancestors of this widget were:\n [root]'));
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab