How to change shadow color of AppBar?

Question

I am trying to change shadow elevation color of the AppBar but can't find any property for that. I went to the original implementation as well but cant find any property to change shadow color.

AppBar(
        title: Image.asset(
          "images/toolbar_logo.webp",
          width: 80,
          height: 50,
        ),
        centerTitle: true,
        backgroundColor: white,
      ),

I cant wrap the AppBar inside a Material Widget . I know i can avoid the app bar property and create a custom class and add it to my body of Scaffold , but is it possible to change using shadow color of AppBar ?

Answer 1

There isn't a way to change the colour of the default shadow but you can get around it by wrapping your AppBar in a Container which is inside a PreferredSize widget:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          child: Container(
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(0, 2.0),
                blurRadius: 4.0,
              )
            ]),
            child: AppBar(
              elevation: 0.0,
              title: Text("Test"),
            ),
          ),
          preferredSize: Size.fromHeight(kToolbarHeight),
        ),
        body: Container(),
      ),
    );
  }
}

Answer 2

您可以使用 Appbar 的 shadowColor 属性为应用栏下方的阴影着色。

Answer 3

The accepted answer is a bit expired. You can do this in two ways:

Changing directly through the AppBar property:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(shadowColor: Colors.green),
        body: Container(),
      ),
    );
  }
}

Or by using the Theme :

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          shadowColor: Colors.white,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
      ),
    );
  }
}