如何更改 AppBar 的陰影顏色？

Question

我正在嘗試更改AppBar陰影高度顏色，但找不到任何屬性。 我也去了原來的實現，但找不到任何屬性來改變陰影顏色。

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

我無法將AppBar包裹在Material Widget 。 我知道我可以避免使用 app bar 屬性並創建一個自定義類並將其添加到我的Scaffold主體中，但是是否可以使用AppBar陰影顏色進行更改？

Answer 1

沒有辦法改變默認陰影的顏色，但你可以通過將你的AppBar包裝在一個位於PreferredSize小部件內的Container中來解決它：

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

接受的答案有點過期。 您可以通過兩種方式執行此操作：

直接通過AppBar屬性更改：

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

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

或者通過使用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(),
      ),
    );
  }
}