Transparent background behind ClipPath

So, I'm pretty new to flutter, I'm trying to have a AppBar that looks like this :

And I'm actually able to do it using ClipPath like this :

  class Header extends StatelessWidget {
  final String page;
  const Header({required this.page});

  @override
  Widget build(BuildContext context) {
    final double topPadding = MediaQuery.of(context).padding.top;
    return ClipPath(
        child: HeaderContent(page: page, padding: topPadding),
        clipper: Clipper(page: page));
  }
}

class HeaderContent extends StatelessWidget {
  final String page;
  final double padding;
  const HeaderContent({required this.page, required this.padding});
  @override
  Widget build(BuildContext context) {
    final int headerHeight = page == "inscription" ? 250 : 150;
    return Container(
      height: headerHeight + padding,
      padding: EdgeInsets.all(15),
      width: double.infinity,
      color: Theme.of(context).primaryColor,
      child: AppBar(
        title: Text("NOTIFICATIONS", style: Theme.of(context).textTheme.headline6),
        centerTitle: true,
        leading: Icon(
          Icons.arrow_back,
          size: 40,
        ),
      ),
    );
  }
}

class Clipper extends CustomClipper<Path> {
  final String page;
  const Clipper({required this.page});
  @override
  Path getClip(Size size) {
    final Path path = Path();
    selectHeaderClip(size, page, path);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Where the selectHeaderClip is a custom function that return the appropriate clip for a given page.

However, when I have a scrollable page (list of notifications for example), I see the notifications hiding too early as if there was a white rectangular container underneath my appBar. So my question basically is: how can I make that container transparent ?

Ps: sorry for the bad formulation of the question, don't hesitate to edit.