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

Flutter – Change AppBar elevation color/mask with keeping elevation = 1

I have application that have one screen with Drawer. Main screen contains following AppBar:

AppBar(
   foregroundColor: Colors.white,
   backgroundColor: Colors.green,
   elevation: 0,      
   actions: // actions here
)

I want to keep the AppBar because of actions I have here. However, I do not want it to have any color. So I have added following code to the app Scaffold:

extendBodyBehindAppBar: true,

It works well, now the AppBar is invisible, and the actions are visible. However, when I do something in the drawer and I close it, the AppBar starts to have strange color (not everytime). I have found out that it is still transparent, but something happened with the elevation, so it acts now like it has elevation: 1.0. Can somebody advise, how to solve this strange behavior? I think there might be problem with zero elevation for the both AppBar and the rest of the screen, and when Drawer comes above the screen and then closes, the equal elevations collide and therefore it sometimes changes AppBar. The best solution would be to be available to remove any mask/additional effect that is made on AppBar, when it have elevation: 1. Therefore, if I increase the elevation in AppBar and hide all effects, the AppBar would be truly transparent in any cases. Thank you for your help.

Tags:

2

Answers


  1. 0

    The "strange color" is actually surfaceTintColor, which makes the app bar tinted when using Material 3. To remove it, set it to transparent:

    AppBar(
  // ...
  surfaceTintColor: Colors.transparent,
),

    To enable elevation shadow as it was in Material 2, see this post:

    After upgrading to Flutter 3.16, the app bar, background color, button size, and spaces change

    Login or Signup to reply.
  2. 0

    App bar elevation and color change

     appBar: AppBar(
          title: Text('Custom Elevation Color'),
          elevation: 1, // Set elevation to 1
          backgroundColor: Colors.blue, // Set the background color of the AppBar
          iconTheme: IconThemeData(color: Colors.white), // Set icon color
          textTheme: TextTheme(
            headline6: TextStyle(color: Colors.white), // Set text color
          ),
        ),

    #flutter
    #dart

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

Back To Top
Search