Flutter: Can I use Ink in Dismissible?

Question

I'm using Ink widget with decoration to allow ink splashes above images and colored background.

After I wrapped it inside Dismissible, I got a wierd effect: When I swipe the widget, it's content moves as expected but the decoration stucks in it's original position.

You can see this live in dartpad: https://dartpad.dev/5ef2d2eb3823821a74aa11c680d84d4b?null_safety=true

Q: Is this an intended behaviour in flutter or is it a bug?

Note: The issue disappears if I replace Ink with Container or if I put it out of SingleChildScrollView.

A code to reproduce:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // remove SingleChildScrollView and all will be fine
        body: SingleChildScrollView(
          child: Dismissible(
            key: Key('1'),
            // change Ink to Container and all will be fine
            child: Ink(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text('Swipe me, and watch my background get stuck!'),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

The documentation of Ink is...

Paints a decoration (which can be a simple color) on a [Material].

It happens in your sample code because it colors the MaterialApp. To fix your issue, wrap the Ink inside a Material.

Sample...

Material(
  child: Ink(
    width: 100,
    height: 100,
    color: Colors.red,
    child: Text('Swipe me, and watch my background get stuck!'),
  ),
),