无法让SliverAppBar标题颜色跟随ThemeData

Question

我试图在用户使用白色主题时将 SliverAppBar 的标题设置为黑色，在用户使用黑色主题时将其设置为白色，但我无法让标题颜色跟随 ThemeData。当用户更改主题时，我可以更改背景颜色，但 SliverAppBar 标题颜色不跟随。

import "package:flutter/material.dart";

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(),
          bodyText2: TextStyle(),
          headline1: TextStyle(),
          headline2: TextStyle(),
          headline3: TextStyle(),
          headline4: TextStyle(),
          headline5: TextStyle(),
          headline6: TextStyle(),
          subtitle1: TextStyle(),
        ).apply(
          bodyColor: Colors.black,
          displayColor: Colors.black,
        ),
        scaffoldBackgroundColor: Color(0xFFf3f3f8),
        cardColor: Colors.white,

        appBarTheme: AppBarTheme(
          color: Color(0xFFf3f3f8),
        ),

        //fontFamily: 'SF',
      ),
      darkTheme: ThemeData(
        scaffoldBackgroundColor: Color(0xFF2b2b2b),
        backgroundColor: Colors.black,
        cardColor: Color(0xFF454545),
        appBarTheme: AppBarTheme(
          color: Color(0xFF2b2b2b),
        ),
        bottomAppBarColor: Color(0xFF454545),
        //buttonColor: Colors.white,
      ),
      home: BodyOfApp(),
    ),
  );
}

class BodyOfApp extends StatefulWidget {
  @override
  BodyOfAppState createState() => BodyOfAppState();
}

class BodyOfAppState extends State<BodyOfApp> {
  void buttonPressed() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(physics: const BouncingScrollPhysics(), slivers: [
        SliverAppBar(
          pinned: false,
          expandedHeight: 80.0,
          flexibleSpace: FlexibleSpaceBar(
            titlePadding: EdgeInsets.fromLTRB(17, 0, 0, 0),
            title: Text(
              'App Title',
              style: TextStyle(
                fontFamily: 'SF',
              ),
            ),
            centerTitle: false,
          ),
        )
      ]),
    );
  }
}

Answer 1

我遇到了同样的问题，我能够使用 appBarTheme 属性和 AppBarTheme 方法修复它。

return ThemeData(
  useMaterial3: true,

  ...
  appBarTheme: AppBarTheme(backgroundColor: Colors.blue),
  ...
  );

Answer 2

您可以手动将标题颜色设置为您的

textTheme

的

ThemeData

颜色。

Text(
  'App Title',
  style: TextStyle(
    fontFamily: 'SF',
    color: Theme.of(context).textTheme.headline3.color,
    // Or any other headline's color
  ),
),