如何在flutter中将appBarTheme背景色应用到BottomAppBar？

Question

我想使用 appBarTheme 中的背景颜色并将其应用到 BottomAppBar 的颜色属性。

但是

Theme.of(context).appBarTheme.backgroundColor

返回null并且不起作用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Hello World',
      // Application theme data, you can set the colors for the application as
      // you want
      theme: ThemeData(
          // useMaterial3: false,
          colorSchemeSeed: Colors.blue,
          useMaterial3: false),
      // A widget which will be started on application startup
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text(title),
        ),
        body: const Center(
          child: Text(
            'Hello, World!',
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          color: Theme.of(context).appBarTheme.backgroundColor,     //Not working
          child: const Text(
            "nav bar",
          ),
        ));
  }
}

Answer 1

它使用默认值，因为您尚未在 MaterialApp 主题中指定 appBarTheme。只需添加 appBarTheme 参数即可。这是一个例子：

theme: ThemeData(
          // useMaterial3: false,
          colorSchemeSeed: Colors.blue,
          appBarTheme: const AppBarTheme(
            backgroundColor: Color(0xFFB61C1C),
            shadowColor: Color(0xFFFE5252),
            elevation: 5.0,
            centerTitle: true,
          ),