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

688 views Asked by At

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?"),
              ),
            ),
          ],
        ...

1

There are 1 answers

1
Abhi Shake On

Wrap inside BackdropFilter like:

import 'dart:ui';

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