Can't get SliverAppBar title color to follow ThemeData

Question

I'm trying to make the title of my SliverAppBar to be black when the user uses a white theme and white when the user uses a black theme but I can't get the title color to follow the ThemeData. I can get the background color to change when the user changes his theme but the SliverAppBar title color doesn't follow.

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

You can manually set the color of the title to be the textTheme color of your ThemeData.

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