如何在 Flutter 中通過更改主題來更改文本顏色

Question

我正在 Flutter 中開發一個應用程序，它根據系統的主題更改其主題數據，即如果用戶為他的設備啟用了暗模式，該應用程序將自動更改為暗模式，反之亦然。在這里我想更改文本應用程序的顏色。

我創建了自定義文本主題，因為我不想更改默認的TextThemeData 。 相同的代碼如下

text_themes.dart

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    extension CustomTextStyles on TextTheme {
    
      TextStyle get h1 {
        return TextStyle(
          fontSize: 24.0,
          fontWeight: FontWeight.bold,
        );
      }
       
      TextStyle get d1 {
        return TextStyle(
          fontSize: 16.0,
          fontWeight: FontWeight.bold,
          color: Brightness.dark == null ? Colors.blue:Colors.white,
        );
      }
      TextStyle get d2 {
        return TextStyle(fontSize: 16.0);
      }
    }

問題是，每當我切換主題時，文本顏色都不會改變。 我試過使用color: ThemeData.dark() == null ? Colors.blue[800] : Colors.white, color: ThemeData.dark() == null ? Colors.blue[800] : Colors.white, and color: Brightness.dark() == null ? Colors.blue[800] : Colors.white, color: Brightness.dark() == null ? Colors.blue[800] : Colors.white,但沒有任何效果。

這是我在上述代碼行之后的預期輸出

這是我目前的輸出

Main.dart

    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:flutter/material.dart';
    import 'package:kjssc/models/user_data.dart';
    import 'package:kjssc/screens/edit_profile_screen.dart';
    import 'package:kjssc/screens/home_screen.dart';
    import 'package:kjssc/screens/sign_up_screen.dart';
    import 'package:provider/provider.dart';
    import 'screens/login_screen.dart';
    import 'screens/sign_up_in_screen.dart';
    import 'package:shared_preferences/shared_preferences.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      static SharedPreferences mainSharedPreferences;
    
      Widget _getScreenID() {
        return StreamBuilder<FirebaseUser>(
          stream: FirebaseAuth.instance.onAuthStateChanged,
          builder: (BuildContext context, snapshot) {
            if (snapshot.hasData) {
              Provider.of<UserData>(context).currentUserID = snapshot.data.uid;
              return HomeScreen();
            } else {
              return SignUpInScreen();
            }
          },
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return ChangeNotifierProvider(
          create: (context) => UserData(),
          child: MaterialApp(
            title: 'My KJSSC',
            debugShowCheckedModeBanner: false,
            home: _getScreenID(),
            // theme: state.themeData,
            theme: ThemeData(
              brightness: Brightness.light,
              indicatorColor: Colors.white,
              primaryColor: Colors.lightBlue[800],
              primaryIconTheme: IconThemeData(
                color: Colors.white,
              ),
              tabBarTheme: TabBarTheme(
                labelColor: Colors.white,
                unselectedLabelColor: Colors.white70,
                indicatorSize: TabBarIndicatorSize.tab,
                labelStyle: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            darkTheme: ThemeData(
              brightness: Brightness.dark,
              indicatorColor: Colors.white,
              primaryIconTheme: IconThemeData(
                color: Colors.white,
              ),
              tabBarTheme: TabBarTheme(
                labelColor: Colors.white,
                unselectedLabelColor: Colors.white54,
                indicatorSize: TabBarIndicatorSize.tab,
                labelStyle: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
    
            routes: {
              LoginScreen.id: (context) => LoginScreen(),
              SignupScreen.id: (context) => SignupScreen(),
              EditProfileScreen.id: (context) => EditProfileScreen(),
            },
          ),
        );
      }
    }

homescreen.dart（代碼片段）

    child: Row(
      children: <Widget>[
        Container(
          child: Text(
            'Email Id : ',
             style: Theme.of(context).textTheme.d1
          ),
        ),
        Container(
          child: Text(
            'user1@gmail.com',
             style: Theme.of(context).textTheme.d2,
             overflow: TextOverflow.ellipsis,
        ),
       ),
      ],
    ),

Answer 1

在 Flutter 上更改主題應該會觸發 Widget 重建。 我在我的方法中所做的是檢查當前主題並更新要在 Text 小部件上使用的樣式。

TextStyle? _textStyle;

@override
Widget build(BuildContext context) {
  var brightness = MediaQuery.of(context).platformBrightness;
  bool isDarkMode = (brightness == Brightness.dark);
  
  /// Update TextStyle depending on the theme
  if (isDarkMode){
    _textStyle = CustomTextStyleDark();
  } else {
    _textStyle = CustomTextStyleDefault();
  }
  return ...
}