Flutter: How to stop imagefilter (colorfilter / paint filter) at particular child?

Question

I want to apply an ImageFilter to a ListView so that all children are affected and that all children affect each other f.e. blend colors. (That's why applying the filter to the children instead of the listview won't work).

That's fine. But now I need to put another widget on top of these previously drawn widgets (think container whose colors bleed into each other) - without it being affected by the ancestor imageFiltered imagefilters.

I want a "Blocker"Widget so that the previous filters only apply upon this far in the tree - no further below. Is that possible? (btw a BackdropFilter around the ListViews children doesn't work either, though it could be stopped upstream with ClipRect, it won't let the children "interact" / let the filters blend the children.)

After reading a lot about canvas and CustomPaints I think I need to work with a RenderObject as suggested here but I can't get it to work.. and I seem to still struggle to grasp the concept of canvas and paint: can a filter of a parent widget even be "stopped"?

As a workaround I Imagine a second, synched and non-interactive ListView with the desired effect as the background of a main ListView with all the stuff that should not be manipulated...

While writing an idea comes to mind: maybe customizing a listviews builder to accept a second unaffectedChild?

Help much appreciated.

tl;dr

MultipleCustomFilters( // <- ImageFiltered(filter: filter1, child: ImageFiltered(filter2, child: child
  child: ListView.builder(
    itemCount: 5,
    itemBuilder: (BuildContext context, int index) {
      return Center(
        child: Stack(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("I want to receive all filters!"),
            ),
            FilterBlocker( // <- How to build this?
              child: Container(
                width: 40,
                height: 40,
                color: Colors.indigo,
                child: Text("I don't want to receive any previous paint manipulations! How?"),
              ),
            ),
          ],
        ...

Bysshe

Answer 1

Wrap inside BackdropFilter like:

import 'dart:ui';

BackdropFilter(
  filter: ImageFilter.dilate(),
  child: blockFilterChild,
);

Kiesha

note that you can use any filter. here, dilate with no kernel (no params here, or in flutter) means no effect to image. but, this overrides any other filter resulting in the BlockFilter widget you wanted – Kiesha