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

Flutter BottomAppBar has different color, than the udjusted one

I created a Flutter BottomAppBar and an icon in it. The page background color, the BottomAppBar’s color and the icon color is the same: Colors.white. But the BottomAppBar is always darker, why?

BottomAppBar(
      height: 50,
      color: Colors.white,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
              width: 30,
              child: IconButton(
                constraints: const BoxConstraints(),
                style: const ButtonStyle(
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                padding: EdgeInsets.zero,
                icon: Icon(Icons.archive, color: Colors.white, size: 30),

enter image description here

Tags:

2

Answers


  1. 0

    This is due to material3 support in the latest versions of flutter.

    You can disable material3 by adding a ThemeData on your MaterialApp:

    MaterialApp(
    home: MyWidget(),
    theme: ThemeData(useMaterial3: false),
  )

    Or, if you still want to support material3. you can specifically set the theme:

     theme: ThemeData(
          bottomAppBarTheme: const BottomAppBarTheme(
            color: Colors.white,
            elevation: 0.0,
          ),
        )

    Result (in both cases)

    enter image description here

    Login or Signup to reply.
  2. 0

    The slightly tinted color comes from the surfaceTintColor property. Change it to transparent to remove the effect.

    BottomAppBar(
  surfaceTintColor: Colors.transparent,
  // ...
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search