2021-01-15 18:41:55 +00:00
|
|
|
import 'package:flutter/material.dart';
|
2022-08-27 08:12:40 +00:00
|
|
|
import 'package:flutter/services.dart';
|
2021-01-15 18:41:55 +00:00
|
|
|
|
2021-10-26 16:50:34 +00:00
|
|
|
import 'package:fluffychat/utils/platform_infos.dart';
|
2021-04-09 14:29:48 +00:00
|
|
|
import 'app_config.dart';
|
2021-01-24 15:38:25 +00:00
|
|
|
|
2021-01-15 18:41:55 +00:00
|
|
|
abstract class FluffyThemes {
|
2021-01-16 11:46:38 +00:00
|
|
|
static const double columnWidth = 360.0;
|
2022-08-30 18:24:36 +00:00
|
|
|
|
2023-03-15 20:07:36 +00:00
|
|
|
static const double navRailWidth = 64.0;
|
|
|
|
|
|
|
|
static bool isColumnModeByWidth(double width) =>
|
|
|
|
width > columnWidth * 2 + navRailWidth;
|
2022-08-30 18:24:36 +00:00
|
|
|
|
2021-09-19 11:48:23 +00:00
|
|
|
static bool isColumnMode(BuildContext context) =>
|
2022-08-30 18:24:36 +00:00
|
|
|
isColumnModeByWidth(MediaQuery.of(context).size.width);
|
|
|
|
|
2023-08-07 16:40:02 +00:00
|
|
|
static bool isThreeColumnMode(BuildContext context) =>
|
|
|
|
MediaQuery.of(context).size.width > FluffyThemes.columnWidth * 3.5;
|
2021-01-20 10:07:08 +00:00
|
|
|
|
2022-07-07 16:50:13 +00:00
|
|
|
static const fallbackTextStyle = TextStyle(
|
|
|
|
fontFamily: 'Roboto',
|
|
|
|
fontFamilyFallback: ['NotoEmoji'],
|
|
|
|
);
|
2022-04-15 09:42:59 +00:00
|
|
|
|
2021-12-25 17:52:38 +00:00
|
|
|
static var fallbackTextTheme = const TextTheme(
|
2023-01-26 08:47:30 +00:00
|
|
|
bodyLarge: fallbackTextStyle,
|
|
|
|
bodyMedium: fallbackTextStyle,
|
|
|
|
labelLarge: fallbackTextStyle,
|
|
|
|
bodySmall: fallbackTextStyle,
|
|
|
|
labelSmall: fallbackTextStyle,
|
|
|
|
displayLarge: fallbackTextStyle,
|
|
|
|
displayMedium: fallbackTextStyle,
|
|
|
|
displaySmall: fallbackTextStyle,
|
|
|
|
headlineMedium: fallbackTextStyle,
|
|
|
|
headlineSmall: fallbackTextStyle,
|
|
|
|
titleLarge: fallbackTextStyle,
|
|
|
|
titleMedium: fallbackTextStyle,
|
|
|
|
titleSmall: fallbackTextStyle,
|
2021-12-25 17:52:38 +00:00
|
|
|
);
|
2021-01-20 10:07:08 +00:00
|
|
|
|
2023-06-29 07:56:15 +00:00
|
|
|
static LinearGradient backgroundGradient(
|
|
|
|
BuildContext context,
|
|
|
|
int alpha,
|
|
|
|
) {
|
|
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return LinearGradient(
|
|
|
|
begin: Alignment.topCenter,
|
|
|
|
colors: [
|
|
|
|
colorScheme.primaryContainer.withAlpha(alpha),
|
|
|
|
colorScheme.secondaryContainer.withAlpha(alpha),
|
|
|
|
colorScheme.tertiaryContainer.withAlpha(alpha),
|
|
|
|
colorScheme.primaryContainer.withAlpha(alpha),
|
|
|
|
],
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-01-07 08:22:31 +00:00
|
|
|
static const Duration animationDuration = Duration(milliseconds: 250);
|
|
|
|
static const Curve animationCurve = Curves.easeInOut;
|
|
|
|
|
2023-08-12 09:52:20 +00:00
|
|
|
static ThemeData buildTheme(
|
|
|
|
BuildContext context,
|
|
|
|
Brightness brightness, [
|
|
|
|
Color? seed,
|
|
|
|
]) {
|
2023-07-23 04:45:13 +00:00
|
|
|
final colorScheme = ColorScheme.fromSeed(
|
|
|
|
brightness: brightness,
|
|
|
|
seedColor: seed ?? AppConfig.colorSchemeSeed ?? AppConfig.primaryColor,
|
|
|
|
);
|
|
|
|
return ThemeData(
|
|
|
|
visualDensity: VisualDensity.standard,
|
|
|
|
useMaterial3: true,
|
|
|
|
brightness: brightness,
|
|
|
|
colorScheme: colorScheme,
|
2024-01-20 10:23:48 +00:00
|
|
|
textTheme: PlatformInfos.isDesktop
|
2023-07-23 04:45:13 +00:00
|
|
|
? brightness == Brightness.light
|
|
|
|
? Typography.material2018().black.merge(fallbackTextTheme)
|
|
|
|
: Typography.material2018().white.merge(fallbackTextTheme)
|
|
|
|
: null,
|
|
|
|
snackBarTheme: const SnackBarThemeData(
|
|
|
|
behavior: SnackBarBehavior.floating,
|
|
|
|
),
|
|
|
|
dividerColor: brightness == Brightness.light
|
|
|
|
? Colors.blueGrey.shade50
|
|
|
|
: Colors.blueGrey.shade900,
|
|
|
|
popupMenuTheme: PopupMenuThemeData(
|
|
|
|
shape: RoundedRectangleBorder(
|
|
|
|
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
2022-07-07 16:50:13 +00:00
|
|
|
),
|
2023-07-23 04:45:13 +00:00
|
|
|
),
|
2024-03-27 12:49:36 +00:00
|
|
|
textSelectionTheme: TextSelectionThemeData(
|
2024-05-16 07:05:04 +00:00
|
|
|
selectionColor: colorScheme.onSurface.withAlpha(128),
|
2024-04-17 10:36:55 +00:00
|
|
|
selectionHandleColor: colorScheme.secondary,
|
2024-03-27 12:49:36 +00:00
|
|
|
),
|
2023-07-23 04:45:13 +00:00
|
|
|
inputDecorationTheme: InputDecorationTheme(
|
2024-02-22 15:22:04 +00:00
|
|
|
border: OutlineInputBorder(
|
2023-07-23 04:45:13 +00:00
|
|
|
borderSide: BorderSide.none,
|
|
|
|
borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
|
2023-02-02 08:47:35 +00:00
|
|
|
),
|
2024-02-22 17:28:36 +00:00
|
|
|
contentPadding: const EdgeInsets.all(12),
|
2023-07-23 04:45:13 +00:00
|
|
|
filled: true,
|
|
|
|
),
|
|
|
|
appBarTheme: AppBarTheme(
|
2023-08-12 09:52:20 +00:00
|
|
|
toolbarHeight: FluffyThemes.isColumnMode(context) ? 72 : 56,
|
2024-03-24 19:38:39 +00:00
|
|
|
shadowColor: FluffyThemes.isColumnMode(context)
|
|
|
|
? Colors.grey.withAlpha(64)
|
|
|
|
: null,
|
|
|
|
surfaceTintColor:
|
2024-05-16 07:05:04 +00:00
|
|
|
FluffyThemes.isColumnMode(context) ? colorScheme.surface : null,
|
2024-05-26 06:42:14 +00:00
|
|
|
backgroundColor:
|
|
|
|
FluffyThemes.isColumnMode(context) ? colorScheme.surface : null,
|
2023-07-23 04:45:13 +00:00
|
|
|
systemOverlayStyle: SystemUiOverlayStyle(
|
|
|
|
statusBarColor: Colors.transparent,
|
|
|
|
statusBarIconBrightness: brightness.reversed,
|
|
|
|
statusBarBrightness: brightness,
|
|
|
|
systemNavigationBarIconBrightness: brightness.reversed,
|
2024-05-16 07:05:04 +00:00
|
|
|
systemNavigationBarColor: colorScheme.surface,
|
2021-11-13 16:57:55 +00:00
|
|
|
),
|
2023-07-23 04:45:13 +00:00
|
|
|
),
|
|
|
|
textButtonTheme: TextButtonThemeData(
|
|
|
|
style: TextButton.styleFrom(
|
|
|
|
shape: RoundedRectangleBorder(
|
|
|
|
borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
|
2022-12-30 08:12:27 +00:00
|
|
|
),
|
|
|
|
),
|
2023-07-23 04:45:13 +00:00
|
|
|
),
|
|
|
|
outlinedButtonTheme: OutlinedButtonThemeData(
|
|
|
|
style: OutlinedButton.styleFrom(
|
2023-08-12 10:17:28 +00:00
|
|
|
side: BorderSide(
|
|
|
|
width: 1,
|
|
|
|
color: colorScheme.primary,
|
|
|
|
),
|
2023-02-05 09:34:50 +00:00
|
|
|
shape: RoundedRectangleBorder(
|
2023-08-12 10:17:28 +00:00
|
|
|
side: BorderSide(color: colorScheme.primary),
|
2023-02-17 12:01:44 +00:00
|
|
|
borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
|
2023-02-05 09:34:50 +00:00
|
|
|
),
|
|
|
|
),
|
2023-07-23 04:45:13 +00:00
|
|
|
),
|
|
|
|
dialogTheme: DialogTheme(
|
|
|
|
shape: RoundedRectangleBorder(
|
|
|
|
borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
|
|
style: ElevatedButton.styleFrom(
|
2024-04-14 09:48:51 +00:00
|
|
|
backgroundColor: colorScheme.secondaryContainer,
|
|
|
|
foregroundColor: colorScheme.onSecondaryContainer,
|
|
|
|
elevation: 0,
|
2023-07-23 04:45:13 +00:00
|
|
|
padding: const EdgeInsets.all(16),
|
|
|
|
textStyle: const TextStyle(fontSize: 16),
|
|
|
|
shape: RoundedRectangleBorder(
|
|
|
|
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
2022-08-06 11:35:59 +00:00
|
|
|
),
|
|
|
|
),
|
2023-07-23 04:45:13 +00:00
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
2021-01-15 18:41:55 +00:00
|
|
|
}
|
2022-08-28 09:39:33 +00:00
|
|
|
|
|
|
|
extension on Brightness {
|
|
|
|
Brightness get reversed =>
|
|
|
|
this == Brightness.dark ? Brightness.light : Brightness.dark;
|
|
|
|
}
|