refactor(ui): rework text gradient and text wrapper
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
// Copyright (C) 2023 WYATT GROUP
|
||||
// Please see the AUTHORS file for details.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
|
||||
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
|
||||
|
||||
class CardTheme extends CardThemeExtension {
|
||||
const CardTheme({
|
||||
super.backgroundColors,
|
||||
super.body,
|
||||
super.borderColors,
|
||||
super.secondaryBackgroundColor,
|
||||
super.shadowColor,
|
||||
super.subtitle,
|
||||
super.title,
|
||||
});
|
||||
|
||||
factory CardTheme.light() => CardTheme(
|
||||
backgroundColors: const MultiColor.single(Color(0xFFF6F6F6)),
|
||||
secondaryBackgroundColor: Colors.white,
|
||||
borderColors: const MultiColor([
|
||||
Color(0xFFDDE0E3),
|
||||
Color(0xFFCACCD4),
|
||||
]),
|
||||
title: GoogleFonts.montserrat(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: const Color(0xFF24262A),
|
||||
),
|
||||
subtitle: GoogleFonts.montserrat(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: const Color(0xFF24262A),
|
||||
),
|
||||
body: GoogleFonts.montserrat(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
height: 1.7,
|
||||
color: const Color(0xFF24262A),
|
||||
),
|
||||
);
|
||||
|
||||
factory CardTheme.dark() => CardTheme(
|
||||
backgroundColors:
|
||||
MultiColor.single(const Color(0xFFFFFFFF).withOpacity(0.04)),
|
||||
secondaryBackgroundColor: const Color(0xFFFFFFFF).withOpacity(0.04),
|
||||
borderColors: const MultiColor([
|
||||
Color(0xFF60656A),
|
||||
Color(0xFF383C40),
|
||||
]),
|
||||
title: GoogleFonts.montserrat(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
subtitle: GoogleFonts.montserrat(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
body: GoogleFonts.montserrat(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
height: 1.7,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
);
|
||||
|
||||
@override
|
||||
ThemeExtension<CardThemeExtension> copyWith({
|
||||
MultiColor? backgroundColors,
|
||||
Color? secondaryBackgroundColor,
|
||||
MultiColor? borderColors,
|
||||
BoxShadow? shadowColor,
|
||||
TextStyle? body,
|
||||
TextStyle? title,
|
||||
TextStyle? subtitle,
|
||||
}) =>
|
||||
CardTheme(
|
||||
backgroundColors: backgroundColors ?? this.backgroundColors,
|
||||
secondaryBackgroundColor:
|
||||
secondaryBackgroundColor ?? this.secondaryBackgroundColor,
|
||||
borderColors: borderColors ?? this.borderColors,
|
||||
shadowColor: shadowColor ?? this.shadowColor,
|
||||
body: body ?? this.body,
|
||||
title: title ?? this.title,
|
||||
subtitle: subtitle ?? this.subtitle,
|
||||
);
|
||||
|
||||
@override
|
||||
ThemeExtension<CardThemeExtension> lerp(
|
||||
covariant ThemeExtension<CardThemeExtension>? other,
|
||||
double t,
|
||||
) {
|
||||
if (other is! CardTheme) {
|
||||
return this;
|
||||
}
|
||||
return CardTheme(
|
||||
backgroundColors: other.backgroundColors,
|
||||
secondaryBackgroundColor: Color.lerp(
|
||||
secondaryBackgroundColor,
|
||||
other.secondaryBackgroundColor,
|
||||
t,
|
||||
),
|
||||
borderColors: other.borderColors,
|
||||
shadowColor: BoxShadow.lerp(shadowColor, other.shadowColor, t),
|
||||
body: TextStyle.lerp(body, other.body, t),
|
||||
title: TextStyle.lerp(title, other.title, t),
|
||||
subtitle: TextStyle.lerp(subtitle, other.subtitle, t),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -15,14 +15,14 @@
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
import 'package:adaptive_theme/adaptive_theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/material.dart' hide CardTheme;
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/card_theme.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/file_selection_button_theme.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/flat_button_theme.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/loader_theme.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme_extension.dart';
|
||||
|
||||
/// Easely switch between Material and Studio themes.
|
||||
abstract class Themes {
|
||||
@@ -78,32 +78,8 @@ abstract class Themes {
|
||||
),
|
||||
scaffoldBackgroundColor: Colors.white,
|
||||
extensions: <ThemeExtension<dynamic>>[
|
||||
CustomCardColorExtension(
|
||||
backgroundColors: const [
|
||||
Color(0xFFF6F6F6),
|
||||
],
|
||||
secondaryBackgroundColors: Colors.white,
|
||||
borderColor: const [
|
||||
Color(0xFFDDE0E3),
|
||||
Color(0xFFCACCD4),
|
||||
],
|
||||
title: GoogleFonts.montserrat(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: const Color(0xFF24262A),
|
||||
),
|
||||
subtitle: GoogleFonts.montserrat(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: const Color(0xFF24262A),
|
||||
),
|
||||
body: GoogleFonts.montserrat(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
height: 1.7,
|
||||
color: const Color(0xFF24262A),
|
||||
),
|
||||
),
|
||||
// Cards
|
||||
CardTheme.light(),
|
||||
// Buttons
|
||||
FlatButtonTheme.light(),
|
||||
SymbolButtonTheme.light(),
|
||||
@@ -128,33 +104,8 @@ abstract class Themes {
|
||||
),
|
||||
scaffoldBackgroundColor: const Color(0xFF383C40),
|
||||
extensions: <ThemeExtension<dynamic>>[
|
||||
CustomCardColorExtension(
|
||||
secondaryBackgroundColors:
|
||||
const Color(0xFFFFFFFF).withOpacity(0.04),
|
||||
backgroundColors: [
|
||||
const Color(0xFFFFFFFF).withOpacity(0.04),
|
||||
],
|
||||
borderColor: const [
|
||||
Color(0xFF60656A),
|
||||
Color(0xFF383C40),
|
||||
],
|
||||
title: GoogleFonts.montserrat(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
subtitle: GoogleFonts.montserrat(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
body: GoogleFonts.montserrat(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
height: 1.7,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
),
|
||||
// Cards
|
||||
CardTheme.dark(),
|
||||
// Buttons
|
||||
FlatButtonTheme.dark(),
|
||||
SymbolButtonTheme.dark(),
|
||||
|
||||
Reference in New Issue
Block a user