InkImg class

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}

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.
finalinherited
decoration → Decoration?: The decoration to paint on the nearest ancestor Material widget.
finalinherited
hashCode → int: The hash code for this object.
no setterinherited
height → double?: A height to apply to the decoration and the child. The height includes any padding.
finalinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
padding → EdgeInsetsGeometry?: Empty space to inscribe inside the decoration. The child, if any, is placed inside this padding.
finalinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
width → double?: A width to apply to the decoration and the child. The width includes any padding.
finalinherited

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.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent 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.
inherited