Question 179909 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I make a transparent Material 3 NavBar in Flutter?

I want to make my NavigationBar transparent. I have tried extendBody: true on Scafold with surfaceTintColor=Colors.transparent to the NavigationBar widget, but nothing changed.

Tags:

2

Answers


  1. 0

    According to the document, SurfaceTintColor is the color of the surface tint overlay applied to the app bar’s background color to indicate elevation.

    If you want to make the AppBar transparent, just use the property backgroundColor instead.

    Scaffold(
      extendBody: true,
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.transparent, // To make appBar transparent
        
        /// This is not necessary. You can play around 
        /// to see surfaceTintColor when the AppBar is transaprent
        surfaceTintColor: Colors.redAccent,
        elevation: 3,
        title: Text(widget.title),
      ),
),

    It is also applied to NavigationBar

    bottomNavigationBar: NavigationBar(
        surfaceTintColor: Colors.amber, // not neccessary
        backgroundColor: Colors.transparent,
        destinations: [
          Icon(Icons.book, color: Colors.blue,),
          Icon(Icons.map, color: Colors.blue,),
        ],
      ),
    Login or Signup to reply.
  2. 0

    You can use SystemChrome.setSystemUIOverlayStyle and ColoredBox to make NavigationBar become transparent.

    Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
  const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent,
  ),
);
return Scaffold(
  bottomNavigationBar: ColoredBox(
    color: Colors.transparent,
    child: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: 'Settings',
        ),
      ],
    ),
  ),
...

    It work on Android and Web.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search