Commit 8d7733fd authored by Ian Hickson's avatar Ian Hickson Committed by GitHub

Add more breadcrumbs around material buttons and ink wells. (#9760)

parent b5671f1b
...@@ -61,7 +61,7 @@ class BackButton extends StatelessWidget { ...@@ -61,7 +61,7 @@ class BackButton extends StatelessWidget {
} }
} }
/// A Material Design close button. /// A material design close button.
/// ///
/// A [CloseButton] is an [IconButton] with a "close" icon. When pressed, the /// A [CloseButton] is an [IconButton] with a "close" icon. When pressed, the
/// close button calls [Navigator.maybePop] to return to the previous route. /// close button calls [Navigator.maybePop] to return to the previous route.
...@@ -76,6 +76,7 @@ class BackButton extends StatelessWidget { ...@@ -76,6 +76,7 @@ class BackButton extends StatelessWidget {
/// * [BackButton], which is more appropriate for middle nodes in the /// * [BackButton], which is more appropriate for middle nodes in the
/// navigation tree or where pages can be popped instantaneously with /// navigation tree or where pages can be popped instantaneously with
/// no user data consequence. /// no user data consequence.
/// * [IconButton], to create other material design icon buttons.
class CloseButton extends StatelessWidget { class CloseButton extends StatelessWidget {
/// Creates a Material Design close button. /// Creates a Material Design close button.
const CloseButton({ Key key }) : super(key: key); const CloseButton({ Key key }) : super(key: key);
...@@ -84,7 +85,7 @@ class CloseButton extends StatelessWidget { ...@@ -84,7 +85,7 @@ class CloseButton extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new IconButton( return new IconButton(
icon: const Icon(Icons.close), icon: const Icon(Icons.close),
tooltip: 'Close', tooltip: 'Close', // TODO(ianh): Figure out how to localize this string
onPressed: () { onPressed: () {
Navigator.of(context).maybePop(); Navigator.of(context).maybePop();
}, },
......
...@@ -20,9 +20,9 @@ import 'theme.dart'; ...@@ -20,9 +20,9 @@ import 'theme.dart';
/// ///
/// See also: /// See also:
/// ///
/// * [ButtonTheme] /// * [ButtonTheme], which uses this enum to define the [ButtonTheme.textTheme].
/// * [RaisedButton] /// * [RaisedButton], which styles itself based on the ambient [ButtonTheme].
/// * [FlatButton] /// * [FlatButton], which styles itself based on the ambient [ButtonTheme].
enum ButtonTextTheme { enum ButtonTextTheme {
/// The button should use the normal color (e.g., black or white depending on the [ThemeData.brightness]) for its text. /// The button should use the normal color (e.g., black or white depending on the [ThemeData.brightness]) for its text.
normal, normal,
...@@ -35,9 +35,9 @@ enum ButtonTextTheme { ...@@ -35,9 +35,9 @@ enum ButtonTextTheme {
/// ///
/// See also: /// See also:
/// ///
/// * [ButtonTextTheme] /// * [ButtonTextTheme], which is used by [textTheme].
/// * [RaisedButton] /// * [RaisedButton], which styles itself based on the ambient [ButtonTheme].
/// * [FlatButton] /// * [FlatButton], which styles itself based on the ambient [ButtonTheme].
class ButtonTheme extends InheritedWidget { class ButtonTheme extends InheritedWidget {
/// Creates a button theme. /// Creates a button theme.
/// ///
...@@ -121,6 +121,13 @@ class ButtonTheme extends InheritedWidget { ...@@ -121,6 +121,13 @@ class ButtonTheme extends InheritedWidget {
/// ///
/// MaterialButtons whose [onPressed] handler is null will be disabled. To have /// MaterialButtons whose [onPressed] handler is null will be disabled. To have
/// an enabled button, make sure to pass a non-null value for onPressed. /// an enabled button, make sure to pass a non-null value for onPressed.
///
/// If you want an ink-splash effect for taps, but don't want to use a button,
/// consider using [InkWell] directly.
///
/// See also:
///
/// * [IconButton], to create buttons that contain icons rather than text.
class MaterialButton extends StatefulWidget { class MaterialButton extends StatefulWidget {
/// Creates a material button. /// Creates a material button.
/// ///
......
...@@ -40,6 +40,7 @@ import 'theme.dart'; ...@@ -40,6 +40,7 @@ import 'theme.dart';
/// material. /// material.
/// * [DropdownButton], which offers the user a choice of a number of options. /// * [DropdownButton], which offers the user a choice of a number of options.
/// * [SimpleDialogOption], which is used in [SimpleDialog]s. /// * [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. /// * [InkWell], which implements the ink splash part of a flat button.
/// * <https://material.google.com/components/buttons.html> /// * <https://material.google.com/components/buttons.html>
class FlatButton extends StatelessWidget { class FlatButton extends StatelessWidget {
......
...@@ -23,7 +23,7 @@ const double _kMinButtonSize = 48.0; ...@@ -23,7 +23,7 @@ const double _kMinButtonSize = 48.0;
/// A material design icon button. /// A material design icon button.
/// ///
/// An icon button is a picture printed on a [Material] widget that reacts to /// An icon button is a picture printed on a [Material] widget that reacts to
/// touches by filling with color. /// touches by filling with color (ink).
/// ///
/// Icon buttons are commonly used in the [AppBar.actions] field, but they can /// Icon buttons are commonly used in the [AppBar.actions] field, but they can
/// be used in many other places as well. /// be used in many other places as well.
...@@ -33,12 +33,19 @@ const double _kMinButtonSize = 48.0; ...@@ -33,12 +33,19 @@ const double _kMinButtonSize = 48.0;
/// ///
/// Requires one of its ancestors to be a [Material] widget. /// Requires one of its ancestors to be a [Material] widget.
/// ///
/// Will be automatically sized up to the recommended 48 logical pixels if smaller. /// The hit region of an icon button will, if possible, be at least 48.0 pixels
/// in size, regardless of the actual [iconSize]. The [alignment] controls how
/// the icon itself is positioned within the hit region.
/// ///
/// See also: /// See also:
/// ///
/// * [Icons] /// * [Icons], a library of predefined icons.
/// * [AppBar] /// * [BackButton], an icon button for a "back" affordance which adapts to the
/// current platform's conventions.
/// * [CloseButton], an icon button for closing pages.
/// * [AppBar], to show a toolbar at the top of an application.
/// * [RaisedButton] and [FlatButton], for buttons with text in them.
/// * [InkResponse] and [InkWell], for the ink splash effect itself.
class IconButton extends StatelessWidget { class IconButton extends StatelessWidget {
/// Creates an icon button. /// Creates an icon button.
/// ///
......
...@@ -26,7 +26,15 @@ import 'theme.dart'; ...@@ -26,7 +26,15 @@ import 'theme.dart';
/// If a Widget uses this class directly, it should include the following line /// If a Widget uses this class directly, it should include the following line
/// at the top of its [build] function to call [debugCheckHasMaterial]: /// at the top of its [build] function to call [debugCheckHasMaterial]:
/// ///
/// assert(debugCheckHasMaterial(context)); /// ```dart
/// assert(debugCheckHasMaterial(context));
/// ```
///
/// See also:
///
/// * [GestureDetector], for listening for gestures without ink splashes.
/// * [RaisedButton] and [FlatButton], two kinds of buttons in material design.
/// * [IconButton], which combines [InkResponse] with an [Icon].
class InkResponse extends StatefulWidget { class InkResponse extends StatefulWidget {
/// Creates an area of a [Material] that responds to touch. /// Creates an area of a [Material] that responds to touch.
/// ///
...@@ -248,7 +256,16 @@ class _InkResponseState<T extends InkResponse> extends State<T> { ...@@ -248,7 +256,16 @@ class _InkResponseState<T extends InkResponse> extends State<T> {
/// If a Widget uses this class directly, it should include the following line /// If a Widget uses this class directly, it should include the following line
/// at the top of its [build] function to call [debugCheckHasMaterial]: /// at the top of its [build] function to call [debugCheckHasMaterial]:
/// ///
/// assert(debugCheckHasMaterial(context)); /// ```dart
/// assert(debugCheckHasMaterial(context));
/// ```
///
/// See also:
///
/// * [GestureDetector], for listening for gestures without ink splashes.
/// * [RaisedButton] and [FlatButton], two kinds of buttons in material design.
/// * [InkResponse], a variant of [InkWell] that doesn't force a rectangular
/// shape on the ink reaction.
class InkWell extends InkResponse { class InkWell extends InkResponse {
/// Creates an ink well. /// Creates an ink well.
/// ///
......
...@@ -25,11 +25,16 @@ import 'theme.dart'; ...@@ -25,11 +25,16 @@ import 'theme.dart';
/// ///
/// Requires one of its ancestors to be a [Material] widget. /// 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.
///
/// See also: /// See also:
/// ///
/// * [FlatButton] /// * [FlatButton], a material design button without a shadow.
/// * [DropdownButton] /// * [DropdownButton], a button that shows options to select from.
/// * [FloatingActionButton] /// * [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.
/// * <https://material.google.com/components/buttons.html> /// * <https://material.google.com/components/buttons.html>
class RaisedButton extends StatelessWidget { class RaisedButton extends StatelessWidget {
/// Creates a raised button. /// Creates a raised button.
......
...@@ -15,7 +15,7 @@ export 'package:flutter/services.dart' show TextInputType; ...@@ -15,7 +15,7 @@ export 'package:flutter/services.dart' show TextInputType;
const Duration _kTransitionDuration = const Duration(milliseconds: 200); const Duration _kTransitionDuration = const Duration(milliseconds: 200);
const Curve _kTransitionCurve = Curves.fastOutSlowIn; const Curve _kTransitionCurve = Curves.fastOutSlowIn;
/// A Material Design text field. /// A material design text field.
/// ///
/// A text field lets the user enter text, either with hardware keyboard or with /// A text field lets the user enter text, either with hardware keyboard or with
/// an onscreen keyboard. /// an onscreen keyboard.
......
...@@ -52,7 +52,11 @@ typedef GestureRecognizer GestureRecognizerFactory(GestureRecognizer recognizer) ...@@ -52,7 +52,11 @@ typedef GestureRecognizer GestureRecognizerFactory(GestureRecognizer recognizer)
/// them to the callbacks. To ignore accessibility events, set /// them to the callbacks. To ignore accessibility events, set
/// [excludeFromSemantics] to true. /// [excludeFromSemantics] to true.
/// ///
/// See http://flutter.io/gestures/ for additional information. /// See <http://flutter.io/gestures/> for additional information.
///
/// Material design applications typically react to touches with ink splash
/// effects. The [InkWell] class implements this effect and can be used in place
/// of a [GestureDetector] for handling taps.
class GestureDetector extends StatelessWidget { class GestureDetector extends StatelessWidget {
/// Creates a widget that detects gestures. /// Creates a widget that detects gestures.
/// ///
......
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