InkImg class Null safety

A convenience widget for drawing images and other decorations on Material widgets, so that InkWell and InkResponse splashes will render over them.

Ink splashes and highlights, as rendered by InkWell and InkResponse, draw on the actual underlying Material, under whatever widgets are drawn over the material (such as Text and Icons). If an opaque image is drawn over the Material (maybe using a Container or DecoratedBox), these ink effects will not be visible, as they will be entirely obscured by the opaque graphics drawn above the Material.

This widget draws the given Decoration directly on the Material, in the same way that InkWell and InkResponse draw there. This allows the splashes to be drawn above the otherwise opaque graphics.

An alternative solution is to use a MaterialType.transparency material above the opaque graphics, so that the ink responses from InkWells and InkResponses will be drawn on the transparent material on top of the opaque graphics, rather than under the opaque graphics on the underlying Material.

Limitations

This widget is subject to the same limitations as other ink effects, as described in the documentation for Material. Most notably, the position of an Ink widget must not change during the lifetime of the Material object unless a LayoutChangedNotification is dispatched each frame that the position changes. This is done automatically for ListView and other scrolling widgets, but is not done for animated transitions such as SlideTransition.

Additionally, if multiple Ink widgets paint on the same Material in the same location, their relative order is not guaranteed. The decorations will be painted in the order that they were added to the material, which generally speaking will match the order they are given in the widget tree, but this order may appear to be somewhat random in more dynamic situations.

{@tool snippet}

The following example shows how an image can be printed on a Material widget with an InkWell above it:

Material(
  color: Colors.grey[800],
  child: Center(
    child: InkImg(
      image: const AssetImage('cat.jpeg'),
      fit: BoxFit.cover,
      width: 300.0,
      height: 200.0,
      child: InkWell(
        onTap: () { /* ... */ },
        child: const Align(
          alignment: Alignment.topLeft,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Text(
              'KITTEN',
              style: TextStyle(
                fontWeight: FontWeight.w900,
                color: Colors.white,
              ),
            ),
          ),
        )
      ),
    ),
  ),
)

{@end-tool}

See also:

(Description copied from Ink.)

Inheritance

Constructors

InkImg({Key? key, Color? color, required ImageProvider<Object> image, double scale = 1.0, double? width, double? height, EdgeInsets? padding, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, Repeat repeat = Repeat.noRepeat, Offset mirrorOffset = Offset.zero, ColorFilter? colorFilter, Rect? centerSlice, bool matchTextDirection = false, Widget? child, ImageErrorListener? onImageError})
Creates a widget that shows an image (obtained from an ImageProvider) on a Material and whose underlying decoration supports the Repeat rendering modes including Repeat.mirror. [...]

Properties

child Widget?
The child contained by the container. [...]
final, inherited
decoration Decoration?
The decoration to paint on the nearest ancestor Material widget. [...]
final, inherited
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
height double?
A height to apply to the decoration and the child. The height includes any padding.
final, inherited
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
padding EdgeInsetsGeometry?
Empty space to inscribe inside the decoration. The child, if any, is placed inside this padding. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
width double?
A width to apply to the decoration and the child. The width includes any padding.
final, inherited

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
createState() State<Ink>
Creates the mutable state for this widget at a given location in the tree. [...]
inherited
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
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 DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
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 ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited