Flutter: Transparent clipped AppBar

Question

I have a waved app bar that looks like this:

As you can see the clipped area is not transparent but rather has the (black) canvas color and is blocking some ListView entries.

The code for the app bar looks something like this:

class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
...
@override
Widget build(BuildContext context) {
    return PreferredSize(
        child: ClipPath(
          clipper: WaveClip(),
          child: Container(
            color: getAppBarColor(),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ...
              ],
            ),
          ),
        ),
        preferredSize: const Size.fromHeight(kToolbarHeight + 60));
  }
}

As one can see I am using a ClipPath with a custom clipper to clip a Container. How do I clip it in a transparent manner?

Solution

try this:

Scaffold(
  extendBodyBehindAppBar: true,

this will make items behind appbar visible

Comments

[Josip Domazet]

This did not have an effect. Afaik this is useful for appbars that are somewhat transparent. But my appbar is not transparent yet and that's the problem. The cut parts need to be transparent.

[Jim]

what if you change nesting of PreferredSize to inner, updated

[Josip Domazet]

Ok the problem was that one child widget of the body was a SafeArea hence negating all effects of extendBodyBehindAppBar. Your original answer was correct. Thank you.

[Jim]

good to hear that, i will update back to original one, happy coding!