search

lohanidamodar / flutter_custom_clippers

Flutter package that provides you custom clippers to help you achieve various custom shapes.
https://pub.dartlang.org/packages/flutter_custom_clippers
GNU General Public License v3.0
323 stars 68 forks source link

How to make a curved bottom app bar #13

Closed TahaMalas closed 4 years ago

TahaMalas commented 4 years ago

Hi!, I'm trying to implement this screenshot with bottom app bar, I didn't manage to make the SideCutClipper to be at the top of the bottom app bar any ideas?

Image description

lohanidamodar commented 4 years ago

For that you don't need custom clippers, just use ClipRRect for example

ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0)
        ),
              child: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Container(
            height: kToolbarHeight,
          ),

        ),
      )
TahaMalas commented 4 years ago

For that you don't need custom clippers, just use ClipRRect for example

ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0)
        ),
              child: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Container(
            height: kToolbarHeight,
          ),

        ),
      )

The solution you're suggesting is only for the curved top right and top left corners right? I'm asking for the curve on the selected tab in the bottom tab bar.

lohanidamodar commented 4 years ago

I think this is what you are looking for then, https://github.com/rafalbednarczuk/curved_navigation_bar

TahaMalas commented 4 years ago

I think this is what you are looking for then, https://github.com/rafalbednarczuk/curved_navigation_bar

Exactly, thank you so much, and sorry for the inconvenience

lohanidamodar commented 4 years ago

No problem! Glad to help!