在不使用 ThemeData 的情况下创建深色主题

Question

我创建了一个名为 theme.dart 的 dart 文件，其中我把我所有的 colors 以及我的 font sizes 和 text styles 都放在那里。

我的 theme.dart 看起来像这样：

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

//COLORS
const colorPrimary = Color(0xFF913f91);
const colorPrimaryLight = Color(0xFFed74ed);
const colorSecondary = Color(0xFF1fb4ac);
const colorSecondaryLight = Color(0xFF3ee6dc);
const colorTertiary = Color(0xFFff8519);
const colorTertiaryLight = Color(0xFFf7a963);
const colorPositive = Color(0xFF00d96f);
const colorNegative = Color(0xFFFF4464);
const colorNegativeDark = Color(0xFFff8095);
const colorDisabled = Color(0xFFC1C1C1);
const colorOffWhite = Color(0xFFf2f2f2);
const colorOffBlack = Color(0xFF222222);
const colorText = Color(0xFF222222);
const colorAqua = Color(0xFF19c4fc);
const colorAquaDark = Color(0xFF09a7db);
const colorDarkBlue = Color(0xFF00649e);
const colorBlue = Color(0xFF1fadff);
const colorYellow = Color(0xFFfff021);
const colorYellowLight = Color(0xFFfff354);
const gradientTop = Color(0xFFFFD560);
const gradientBottom = Color(0xFFFF8519);
const colorShadowDark = Color(0xFF090909);


//FONT SIZE
const fontSizeRegular = 18.0;
const fontSizeSmall = 12.0;
const fontSizeMedium = 15.0;
const fontSizeSmallest = 10.0;
const fontSizeLarge = 22.0;
const fontExtraLarge = 30.0;

//TEXT STYLES
textHeaderStyle(Color _color, FontStyle _fontStyle, FontWeight _fontWeight) {
  return TextStyle(
      fontSize: ScreenUtil().setSp(fontSizeLarge),
      color: _color,
      fontStyle: _fontStyle,
      fontWeight: _fontWeight);
}

例如，我在“设置”菜单中有一个switch，可以在暗模式和亮模式之间切换。

最好的方法是什么？

如果我在颜色上添加条件，例如：

const colorPrimary = mode == "light" ? Color(0xFF913f91) : Color(0xFFed74ed);

其中 "mode" 是一个全局变量，我每次在 "settings" 菜单中切换switch 时添加一个setState()，它会起作用吗?

我很乐意尝试您的所有建议。

感谢那些可以提供帮助的人！

Answer 1

我能想到的更简单的解决方案；您可以在调用时使用 bool 来选择主题模式，如果是真的，您可以设置明亮的主题颜色，如果是错误的深色主题颜色，您需要将其与 shared preferences 一起存储以应用整个应用程序并制作它是永久的，我的意思是用户设置可以再次设置，即使用户靠近应用程序然后重新启动它。

所以你可以在你的主题飞镖中使用 bool：

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

    //COLORS
    colorPrimary = mode ? Color(0xFFed74ed) : Color(0xFF913f91);
    colorSecondary = mode ? Color(0xFF3ee6dc) : Color(0xFF1fb4ac);
    colorTertiary = mode ? Color(0xFFf7a963): Color(0xFFff8519);
    ...

那么你不需要创建一个全局变量，只是你说你可以在每次切换“设置”菜单中的开关时添加一个 setState()..