How to make background of ClipPath transparent?

Question

The result of ClipPath

I used ClipPath to clip the path from bottom TabBar as shown in the above image.

Here's the scaffold:

Scaffold(
  bottomNavigationBar: ClipPath(
    clipBehavior: Clip.hardEdge,
      clipper: NavBarClipper(), // class code shown below
        child: Material(
        elevation: 5,
        color: Color(0xff282c34),
        child: TabBar(
          onTap: (value) {
            if (value == 3) {
              setState(() {
                _scaffoldKey.currentState.openEndDrawer();
              });
            }
          },
        indicatorColor: Colors.white,
        indicatorWeight: 1.0,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.grey,
        tabs: <Tab>[
          Tab(
            icon: Icon(
              Icons.home,
                size: 30,
              ),
          ),
          Tab(
            icon: Icon(
              Icons.add_a_photo,
                size: 30,
              ),
          ),
          Tab(
            icon: Icon(
              Icons.notifications,
                size: 30,
            ),
          ),
          Tab(
            icon: Icon(
              Icons.person,
                size: 30,
            ),
          ),
        ],
        controller: controller,
      ),
    ),
  ),
);

Here's the clipper class

class NavBarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width - 20, 0);
    path.lineTo(20, 0);
    path.lineTo(0, size.height);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

But as you can see in the image the clipped area color is white and it's not looking very good. I want to make it transparent so that the image behind it is also visible through the cutout space.

Edit: I think the problem is not that the cutout area is white. Actually the TabBar does not lie above the page content along z axis. Page content and TabBar lie separately. I want to make it equivalent to position: absolute in html so that when I scroll the content goes below the TabBar.

Answer 1

The suggestion of @10101010 worked!

I used Stack and it worked fine.

Here's the final scaffold code:

return Scaffold(
  body: Stack(
    children: <Widget>[
      Container(
        height: deviceHeight,
        width: deviceWidth,
      ),
      _currentPage(),
      Positioned(
       width: viewportWIdth,
       height: 40,
       bottom: 0,
       child: ClipPath(
         clipper: NavBarClipper(),
         child: Material(
         elevation: 5,
         color: Color(0xff282c34),
         child: TabBar(
           onTap: (newIndex) {
             if (newIndex == 4) {
               setState(() {
                 _scaffoldKey.currentState.openEndDrawer();
               });
             } else {
               setState(() {
                 _currentIndex = newIndex;
               });
             }
           },
           indicatorColor: Colors.white,
           indicatorWeight: 1.0,
           labelColor: Colors.white,
           unselectedLabelColor: Colors.grey,
           tabs: <Tab>[
             Tab(
               icon: Icon(
                 Icons.home,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.add_a_photo,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.notifications,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.person,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.menu,
                 size: 30,
               ),
             ),
           ],
           controller: controller,
         ),
       ),
     ),
   ],
  ),
  key: _scaffoldKey,
  endDrawer: Drawer(
  child: Container(),
),
);