1

I have a waved app bar that looks like this:

appbar

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?

Josip Domazet
  • 2,246
  • 2
  • 14
  • 37

1 Answers1

2

try this:

Scaffold(
  extendBodyBehindAppBar: true,

this will make items behind appbar visible

Jim
  • 6,928
  • 1
  • 7
  • 18
  • 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. – Josip Domazet Jan 25 '22 at 00:14
  • what if you change nesting of PreferredSize to inner, updated – Jim Jan 26 '22 at 02:24
  • 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. – Josip Domazet Jan 27 '22 at 00:08
  • 1
    good to hear that, i will update back to original one, happy coding! – Jim Jan 27 '22 at 01:52