IconButton class
A material design icon button.
An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).
Icon buttons are commonly used in the AppBar.actions field, but they can be used in many other places as well.
If the onPressed callback is null, then the button will be disabled and will not react to touch.
Requires one of its ancestors to be a Material widget.
The hit region of an icon button will, if possible, be at least 48.0 pixels in size, regardless of the actual iconSize, to satisfy the touch target size requirements in the Material Design specification. The alignment controls how the icon itself is positioned within the hit region.
This sample shows an
IconButton
that uses the Material icon "volume_up" to
increase the volume.
double _volume = 0.0;
// ...
Widget build(BuildContext) {
return IconButton(
icon: Icon(Icons.volume_up),
tooltip: 'Increase volume by 10%',
onPressed: () { setState(() { _volume *= 1.1; }); },
);
}
To create a sample project with this code snippet, run:
flutter create --sample=material.IconButton mysample
flutter create --sample=material.IconButton mysample
// This sample shows an `IconButton` that uses the Material icon "volume_up" to
// increase the volume.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Code Sample for material.IconButton',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyStatefulWidget(),
);
}
}
double _volume = 0.0;
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Widget build(BuildContext) {
return IconButton(
icon: Icon(Icons.volume_up),
tooltip: 'Increase volume by 10%',
onPressed: () {
setState(() {
_volume *= 1.1;
});
},
);
}
}
See also:
- Icons, a library of predefined icons.
- 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.
- Inheritance
- Object
- Diagnosticable
- DiagnosticableTree
- Widget
- StatelessWidget
- IconButton
Constructors
- IconButton({Key key, double iconSize: 24.0, EdgeInsetsGeometry padding: const EdgeInsets.all(8.0), AlignmentGeometry alignment: Alignment.center, @required Widget icon, Color color, Color highlightColor, Color splashColor, Color disabledColor, @required VoidCallback onPressed, String tooltip })
-
Creates an icon button. [...]
const
Properties
- alignment → AlignmentGeometry
-
Defines how the icon is positioned within the IconButton. [...]
final
- color → Color
-
The color to use for the icon inside the button, if the icon is enabled.
Defaults to leaving this up to the icon widget. [...]
final
- disabledColor → Color
-
The color to use for the icon inside the button, if the icon is disabled.
Defaults to the ThemeData.disabledColor of the current Theme. [...]
final
- highlightColor → Color
-
The secondary color of the button when the button is in the down (pressed)
state. 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. [...]
final
- icon → Widget
-
The icon to display inside the button. [...]
final
- iconSize → double
-
The size of the icon inside the button. [...]
final
- onPressed → VoidCallback
-
The callback that is called when the button is tapped or otherwise activated. [...]
final
- padding → EdgeInsetsGeometry
-
The padding around the button's icon. The entire padded icon will react
to input gestures. [...]
final
- splashColor → Color
-
The primary color of the button when the button is in the down (pressed) state.
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. [...]
final
- tooltip → String
-
Text that describes the action that will occur when the button is pressed. [...]
final
- hashCode → int
-
The hash code for this object. [...]
read-only, inherited
- key → Key
-
Controls how one widget replaces another widget in the tree. [...]
final, inherited
- runtimeType → Type
-
A representation of the runtime type of the object.
read-only, inherited
Methods
-
build(
BuildContext context) → Widget -
Describes the part of the user interface represented by this widget. [...]
override
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node. [...]
override
-
createElement(
) → StatelessElement -
Creates a StatelessElement to manage this widget's location in the tree. [...]
inherited
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children. [...]
@protected, inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a non-existent method or property is accessed. [...]
inherited
-
toDiagnosticsNode(
{String name, DiagnosticsTreeStyle style }) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by toStringDeep. [...]
inherited
-
toString(
{DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String -
Returns a string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String -
Returns a string representation of this node and its descendants. [...]
inherited
-
toStringShallow(
{String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String -
Returns a one-line detailed description of the object. [...]
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
dynamic other) → bool -
The equality operator. [...]
inherited