flutter主题暗/亮-使用样式时不工作:主题.of(上下文).文本主题.标题5

64jmpszr  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(119)

我正在实现一个主题黑暗与光明。
如果我用这个

title: Text("${singleProject.name}",),style: Theme.of(context).textTheme.headline5),

即使我切换到黑暗,文本仍然是黑色的。
如果我用这个密码

title: Text("${singleProject.name}",),

文本正在改变他的颜色取决于我是在亮或暗模式。问题是在这种情况下,我不能使用字体和大小,我想为我所有的应用程序。
拜托,你能帮忙吗?
文本主题

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

class TTextTheme {

  static TextTheme lightTextTheme = TextTheme(

    subtitle1: GoogleFonts.openSans (color: Colors.black,
        fontWeight: FontWeight.bold,fontSize: 13.0),

    ///For subtitle Drawer Menu
    bodyText1: GoogleFonts.montserrat (color: Colors.black,
        fontWeight: FontWeight.normal,fontSize: 16.0),

    bodyText2: GoogleFonts.montserrat (color: Colors.black,
        fontWeight: FontWeight.bold,fontSize: 13.0),
    headline6: const TextStyle(fontSize: 30),

    ///For AppBar title
    headline1: GoogleFonts.openSans(color: Colors.white,
        fontWeight: FontWeight.bold, fontSize: 16.0),

    ///For Title Drawer Menu
    headline2: GoogleFonts.openSans(color: Colors.blue[900],
      fontWeight: FontWeight.bold, fontSize: 13.0),

    ///For tasks & Projects lists
    headline3: GoogleFonts.montserrat (color: Colors.black,
    fontWeight: FontWeight.normal,fontSize: 16.0,),

   /* headline4: GoogleFonts.montserrat (color: Colors.black,
        fontWeight: FontWeight.normal,fontSize: 16.0,
        decoration: TextDecoration.lineThrough,
        decorationThickness: 2.85,
        fontStyle: FontStyle.italic),
*/
    headline5: GoogleFonts.montserrat (color: Colors.black,
      fontWeight: FontWeight.normal,fontSize: 16.0,),

  );

  static TextTheme darkTextTheme = TextTheme(

      subtitle1: GoogleFonts.openSans (color: Colors.white,
          fontWeight: FontWeight.bold,fontSize: 13.0),

      ///For subtitle Drawer Menu
      bodyText1: GoogleFonts.montserrat (color: Colors.white,
          fontWeight: FontWeight.normal,fontSize: 16.0),

      bodyText2: GoogleFonts.montserrat (color: Colors.white,
          fontWeight: FontWeight.bold,fontSize: 13.0),
      headline6: const TextStyle(fontSize: 30),

      ///For AppBar title
      headline1: GoogleFonts.openSans(color: Colors.white,
          fontWeight: FontWeight.bold, fontSize: 16.0),

      ///For Title Drawer Menu
      headline2: GoogleFonts.openSans(color: Colors.blue[900],
          fontWeight: FontWeight.bold, fontSize: 13.0),

      ///For tasks & Projects lists
      headline3: GoogleFonts.montserrat (color: Colors.white,
        fontWeight: FontWeight.normal,fontSize: 16.0,),

      headline4: GoogleFonts.montserrat (color: Colors.white,
          fontWeight: FontWeight.normal,fontSize: 16.0,
          decoration: TextDecoration.lineThrough,
          decorationThickness: 2.85,
          fontStyle: FontStyle.italic),

    headline5: GoogleFonts.montserrat (color: Colors.white,
      fontWeight: FontWeight.normal,fontSize: 16.0,),

  );
}

主题_提供者

import 'package:flutter/material.dart';
import 'package:my_gtd_20220804/theme/text_theme.dart';

class ThemeProvider extends ChangeNotifier {

  ThemeMode themeMode = ThemeMode.system;
  bool get isDarkMode => themeMode == ThemeMode.dark;

  void toggleTheme (bool isOn){
    themeMode = isOn? ThemeMode.dark : ThemeMode.light ;
    notifyListeners();
  }
}

class MyThemes {

  static final darkTheme = ThemeData(

    primarySwatch: Colors.grey,
    primaryColor: Colors.white,
    brightness: Brightness.dark,
    dividerColor: Colors.grey[300],
    scaffoldBackgroundColor: Colors.black,
    colorScheme: const ColorScheme.dark(),
    iconTheme: const IconThemeData(color: Colors.white),
    textTheme:  TTextTheme.darkTextTheme,
    backgroundColor: Colors.black,
    bottomAppBarColor: Colors.black,

  //  fontFamily: 'arimo',
  );


  static final lightTheme = ThemeData(

    primarySwatch: Colors.blue,
    primaryColor: Colors.black,
    brightness: Brightness.light,
    dividerColor: Colors.grey[300],
    scaffoldBackgroundColor: Colors.white,
    iconTheme: const IconThemeData(color: Colors.white),
    textTheme:  TTextTheme.lightTextTheme,
   // fontFamily: 'arimo',
     backgroundColor: Colors.white,
    bottomAppBarColor: Colors.white,
    // accentColor: Colors.red,
    // accentIconTheme: IconThemeData(color: Colors.white),
    // colorScheme: const ColorScheme.light(),
    // primaryColor: Colors.blue,

  );

  /*final menuTitleText = const TextTheme(
    subtitle2: 10,
  );
*/

}

主要

return MaterialApp(
                themeMode: themeProvider.themeMode,
                theme: MyThemes.lightTheme,
                darkTheme: MyThemes.darkTheme,
dba5bblo

dba5bblo1#

发生这种情况是因为您完全是自己实现TextTheme的,这会导致您手动指定每个属性以获得预期的结果,而不是指定ThemeData(),考虑使用预定义的ThemeData工厂构造函数,如ThemeData.light()ThemeData.dark(),然后用copyWith覆盖它们的属性,如下所示:

// You need here to specify all properties by yourself
   static final darkTheme = ThemeData(
   // ...

   // Here you take the predefined dark theme and override its properties
   static final darkTheme = ThemeData.dark().copyWith(
   // ...

可以使用ThemeData.light().copyWith(/*...*/)对灯光模式执行相同的操作

相关问题