Ink 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.

Material(
  color: Colors.teal[900],
  child: Center(
    child: Ink(
      color: Colors.yellow,
      width: 200.0,
      height: 100.0,
      child: InkWell(
        onTap: () { /* ... */ },
        child: const Center(
          child: Text('YELLOW'),
        )
      ),
    ),
  ),
)

Material(
  color: Colors.grey[800],
  child: Center(
    child: Ink.image(
      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,
              ),
            ),
          ),
        )
      ),
    ),
  ),
)

What to do if you want to clip this Ink.image?

See also:

• Container, a more generic form of this widget which paints itself, rather that deferring to the nearest Material widget.
• InkDecoration, the InkFeature subclass used by this widget to paint on Material widgets.
• InkWell and InkResponse, which also draw on Material widgets.