How to make background of ClipPath transparent?

android ios flutter dart flutter-layout

2,347

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(),
),
);

2,347

Author by

Abhinav

Updated on December 12, 2022

Comments

Abhinav over 1 year
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.
- 10101010 almost 5 years
  
  There seems to be no image below the bottom navigation bar
- Abhinav almost 5 years
  
  @10101010 I am talking about the Nature image and all other images behind it.
- 10101010 almost 5 years
  
  I didn't get you. I see a single image(with the Nature word) above your bottom bar. Do you want it to behind(z-axis) your bottom bar?
- Abhinav almost 5 years
  
  @10101010 as you can see along the z-axis the images are below the bottom nav bar. On the left and right side of nav bar triangles are cut. I want to make them transparent so that the part of images are visible through that small area also.
- 10101010 almost 5 years
  
  Ok got it. I don't see that part of your code in your question.
- Abhinav almost 5 years
  
  I think that part of the code is not necessary because our goal is to make that white clipped area transparent and it has to nothing with that part of the code.
- 10101010 almost 5 years
  
  Your edit makes sense. You might want to make use of Stack
- Abhinav almost 5 years
  
  Thank You @10101010 I will try that :)