A piece of material.

Material is the central metaphor in material design. Each piece of material exists at a given elevation, which influences how that piece of material visually relates to other pieces of material and how that material casts shadows.

Most user interface elements are either conceptually printed on a piece of material or themselves made of material. Material reacts to user input using InkSplash and InkHighlight effects. To trigger a reaction on the material, use a MaterialInkController obtained via Material.of.

If a material has a non-zero elevation, then the material will clip its contents because content that is conceptually printing on a separate piece of material cannot be printed beyond the bounds of the material.

If the layout changes (e.g. because there's a list on the paper, and it's been scrolled), a LayoutChangedNotification must be dispatched at the relevant subtree. (This in particular means that Transitions should not be placed inside Material.) Otherwise, in-progress ink features (e.g., ink splashes and ink highlights) won't move to account for the new layout.

In general, the features of a Material should not change over time (e.g. a Material should not change its color, shadowColor or type). The one exception is the elevation, changes to which will be animated.

See also:



Material({Key key, MaterialType type: MaterialType.canvas, double elevation: 0.0, Color color, Color shadowColor: const Color(0xFF000000), TextStyle textStyle, BorderRadius borderRadius, Widget child })
Creates a piece of material. [...]


borderRadius BorderRadius
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. [...]
child Widget
The widget below this widget in the tree.
color Color
The color to paint the material. [...]
elevation double
The z-coordinate at which to place this material. This controls the size of the shadow below the material. [...]
shadowColor Color
The color to paint the shadow below the material. [...]
textStyle TextStyle
The typographical style to use for text within this material.
type MaterialType
The kind of material to show (e.g., card or canvas). This affects the shape of the widget, the roundness of its corners if the shape is rectangular, and the default color.
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


createState() → _MaterialState
Creates the mutable state for this widget at a given location in the tree. [...]
debugFillProperties(DiagnosticPropertiesBuilder description) → void
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
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. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by toStringDeep. [...]
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(other) bool
The equality operator. [...]

Static Methods

of(BuildContext context) MaterialInkController
The ink controller from the closest instance of this class that encloses the given context. [...]


defaultSplashRadius double
The default radius of an ink splash in logical pixels.