时间戳

首页 > 解决方案 > 在不使用 ThemeData 的情况下创建深色主题

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

问题描述

我创建了一个名为 dart 的文件theme.dart，其中我将所有 mycolors和 my font sizesand放在那里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);

其中“模式”是一个全局变量，每次在“设置”菜单中setState()切换时我都会添加一个，它会起作用吗？switch

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

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

标签： flutterdartflutter-layoutflutter-theme

解决方案

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

所以你可以在你的主题飞镖中使用 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() ..

推荐阅读