Flutter：無法使用 AppBarTheme 更改 AppBar 的標題顏色

Question

我正在嘗試使用自定義主題來控制我的應用程序的主題，除此之外，我為我的應用程序欄設置了顏色。

盡管按預期設置了背景顏色，但未設置字體顏色。 什么原因？

另外，這是設置主題的正確方法嗎？ 稍后我將擴展主題，所以我希望一切都盡可能模塊化。

// main.dart
import 'package:flutter/material.dart';
import 'package:note_that/pages/home.dart';
import 'package:note_that/theme/theme.dart';

void main() {
  runApp(const NoteThat());
}

class NoteThat extends StatelessWidget {
  const NoteThat({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "NoteThat",
      theme: ThemeCustom.getThemeData(), // <-- Setting theme here
      routes: {"/": (context) => const HomePage()},
    );
  }
}

// /theme/theme.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class ThemeCustom {
  static const Color _primaryColor = Color.fromRGBO(7, 91, 154, 255);

  static ThemeData getThemeData() {
    return ThemeData(
        appBarTheme: const AppBarTheme(
            titleTextStyle: TextStyle(color: _primaryColor), // <-- Setting title text color here
            backgroundColor: Colors.white),
        textTheme: TextTheme(
            titleLarge: GoogleFonts.montserrat(),
            titleMedium: GoogleFonts.lato(),
            titleSmall: GoogleFonts.poppins(),
            bodyLarge: GoogleFonts.lato(),
            bodyMedium: GoogleFonts.poppins(),
            bodySmall: GoogleFonts.poppins(),
            labelLarge: GoogleFonts.poppins(),
            labelSmall: GoogleFonts.poppins()),
        colorScheme: ColorScheme.fromSeed(seedColor: _primaryColor));
  }
}

// /pages/home.dart
import "package:flutter/material.dart";

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleTextStyle: Theme.of(context).appBarTheme.titleTextStyle, // <-- Accessing title text color here
        title: const Text("NoteThat"),
      ),
    );
  }
}

Answer 1

我為 themeData 提供了 provider 包，所以我可以在應用程序中控制暗模式和亮模式，如果你想更改主題（暗和亮），你打算如何按照你的方式來做。

import 'package:flutter/material.dart';

class ThemeNotifier extends ChangeNotifier {
  bool isLighTheme = false;

  void changeTheme() {
    isLighTheme = !isLighTheme;
    notifyListeners();
  }

  ThemeData get currentTheme =>
      isLighTheme ? ThemeData.light() : ThemeData.dark();
}

主要.dart

void main() {
  runApp(MultiProvider(
    providers: [
      Provider(create: (_) => ResourceContext()),
      ChangeNotifierProvider<ThemeNotifier>(create: (context) =>ThemeNotifier()) 
    ],
    builder: (context, child) => const MyApp(),
  ));
}

class MyApp extends StatelessWidget with NavigatorCustom {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: context.watch<ThemeNotifier>().currentTheme,
      onUnknownRoute: (settings) {
        return MaterialPageRoute(builder: (context) {
          return const LottieLearn(); 
        });
      },
      onGenerateRoute: onGenerateRoute,
      navigatorKey: NavigatorManager.instance.navigatorGlobalKey,
      home: const LoginView(),
    );
  }
}

**更新

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(theme: ThemeCustom.getThemeData(), title: 'Material App', home: const HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleTextStyle: Theme.of(context).appBarTheme.titleTextStyle, // <-- Accessing title text color here
        title: const Text("NoteThat"),
      ),
    );
  }
}

class ThemeCustom {
  static const Color _primaryColor = Colors.black;

  static ThemeData getThemeData() {
    return ThemeData(
        appBarTheme: const AppBarTheme(
            titleTextStyle: TextStyle(
              color: _primaryColor,
            ), // <-- Setting title text color here
            backgroundColor: Colors.white),
        colorScheme: ColorScheme.fromSeed(seedColor: _primaryColor));
  }
}