CODEWITHSUNDEEP
flutterflutter-bottomnavigation
vuchau
vuchau

Reputation: 3

Flutter BottomNavigationBar with transparent background

I'm trying to build a BottomNavigationBar and Float Action Button that has no background (transparent) Layout sample Could you guys help to layout for this? Thanks.

Upvotes: 0

Views: 1689

Answers (3)

NXT Dev
NXT Dev

Reputation: 91

Make background transparent and elevation to zero

BottomNavigationBar(
  type: BottomNavigationBarType.fixed, 
  backgroundColor: Colors.transparent, 
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.grey,
  elevation: 0,
)

Upvotes: 0

camillo777
camillo777

Reputation: 2367

To make the background extend under the BottomNavigationBar You should set:

extendBody: true

as a property in BottomNavigationBar.

Upvotes: 3

RAMU PAL
RAMU PAL

Reputation: 99

you need to wrap the bottom navigation bar with theme widget and try to modify canvas color property to transparent something looks like below

child: Theme(
  data: Theme.of(context)
              .copyWith(canvasColor: Colors.transparent),
)

Upvotes: 1

Related Questions