From a965f6826729d04ce91b381bb9d33101161abed2 Mon Sep 17 00:00:00 2001 From: Hugo Pointcheval Date: Wed, 15 Feb 2023 22:36:26 +0100 Subject: [PATCH] feat(ui_kit): update example with full studio button theme --- .../file_selection_buttons.dart | 2 +- .../buttons/symbol_button/symbol_buttons.dart | 56 ++---- .../theme/file_selection_button_theme.dart | 172 ++++++++++++++++++ .../example/lib/theme/flat_button_theme.dart | 2 + .../lib/theme/simple_icon_button_theme.dart | 114 ++++++++++++ .../lib/theme/symbol_button_theme.dart | 2 + .../example/lib/theme/themes.dart | 9 +- .../file_selection_button_screen.dart | 5 +- 8 files changed, 317 insertions(+), 45 deletions(-) create mode 100644 packages/wyatt_ui_kit/example/lib/theme/file_selection_button_theme.dart create mode 100644 packages/wyatt_ui_kit/example/lib/theme/simple_icon_button_theme.dart diff --git a/packages/wyatt_ui_kit/example/lib/buttons/file_selection_button/file_selection_buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/file_selection_button/file_selection_buttons.dart index 0a2591d7..0f398c13 100644 --- a/packages/wyatt_ui_kit/example/lib/buttons/file_selection_button/file_selection_buttons.dart +++ b/packages/wyatt_ui_kit/example/lib/buttons/file_selection_button/file_selection_buttons.dart @@ -25,7 +25,7 @@ class FileSelectionButtons extends StatelessWidget { Widget _leading() => const DecoratedBox( decoration: BoxDecoration( - color: Constants.grey3, + color: Constants.grey2, borderRadius: BorderRadius.all( Radius.circular(5), ), diff --git a/packages/wyatt_ui_kit/example/lib/buttons/symbol_button/symbol_buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/symbol_button/symbol_buttons.dart index ab426769..54aa9cb5 100644 --- a/packages/wyatt_ui_kit/example/lib/buttons/symbol_button/symbol_buttons.dart +++ b/packages/wyatt_ui_kit/example/lib/buttons/symbol_button/symbol_buttons.dart @@ -23,6 +23,14 @@ import 'package:wyatt_ui_kit_example/theme/constants.dart'; class SymbolButtons extends StatelessWidget { const SymbolButtons({super.key}); + Icon _icon(BuildContext context) => Icon( + Icons.android, + size: 25, + color: (Theme.of(context).colorScheme.brightness == Brightness.light) + ? Constants.dark + : Constants.white, + ); + @override Widget build(BuildContext context) => Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -34,75 +42,47 @@ class SymbolButtons extends StatelessWidget { const Gap(20), SymbolButton( label: const TextWrapper('Text'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ), const Gap(20), SymbolButton( label: const TextWrapper('Enabled'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ) ..bloc.enable() ..bloc.freeze(), const Gap(20), SymbolButton( label: const TextWrapper('Disabled'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ) ..bloc.disable() ..bloc.freeze(), const Gap(20), SymbolButton( label: const TextWrapper('Hovered'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ) ..bloc.onMouseEnter() ..bloc.freeze(), const Gap(20), SymbolButton( label: const TextWrapper('Focused'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ) ..bloc.onFocus() ..bloc.freeze(), const Gap(20), SymbolButton( label: const TextWrapper('Tapped'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ) ..bloc.onClickDown() ..bloc.freeze(), const Gap(20), SymbolButton( label: const TextWrapper('Selected'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ) ..bloc.select() ..bloc.freeze(), @@ -113,11 +93,7 @@ class SymbolButtons extends StatelessWidget { ), child: SymbolButton( label: const TextWrapper('Trigger zone'), - icon: const Icon( - Icons.android, - size: 25, - color: Constants.white, - ), + icon: _icon(context), ), ), const Gap(20), diff --git a/packages/wyatt_ui_kit/example/lib/theme/file_selection_button_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/file_selection_button_theme.dart new file mode 100644 index 00000000..cad4f2ea --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/file_selection_button_theme.dart @@ -0,0 +1,172 @@ +// 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 . + +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'; +import 'package:wyatt_ui_kit_example/theme/constants.dart'; + +class FileSelectionButtonTheme extends FileSelectionButtonThemeExtension { + const FileSelectionButtonTheme({ + super.disabledStyle, + super.focusedStyle, + super.hoveredStyle, + super.normalStyle, + super.tappedStyle, + super.selectedStyle, + super.invalidStyle, + }); + + factory FileSelectionButtonTheme.light() { + final style = FileSelectionButtonStyle( + title: GoogleFonts.montserrat( + fontSize: 16, + fontWeight: FontWeight.w400, + ), + subTitle: GoogleFonts.montserrat( + fontSize: 11, + fontWeight: FontWeight.w400, + ), + radius: BorderRadius.circular(12), + padding: const EdgeInsets.all(10), + foregroundColors: const MultiColor.single(Constants.grey2), + backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)), + borderColors: const MultiColor(Constants.greyGradient), + stroke: 2, + ); + return FileSelectionButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + foregroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), + backgroundColors: const MultiColor.single(Constants.white), + borderColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), + ), + hoveredStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), + ), + focusedStyle: style.copyWith(stroke: 4), + tappedStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), + ), + invalidStyle: style.copyWith( + subTitle: GoogleFonts.montserrat( + fontSize: 11, + fontWeight: FontWeight.w400, + color: Constants.red1, + ), + borderColors: const MultiColor(Constants.redGradient), + ), + // Unused + selectedStyle: style.copyWith( + foregroundColors: const MultiColor.single(Constants.grey2), + borderColors: const MultiColor(Constants.greenGradient), + ), + ); + } + + factory FileSelectionButtonTheme.dark() { + final style = FileSelectionButtonStyle( + title: GoogleFonts.montserrat( + fontSize: 16, + fontWeight: FontWeight.w400, + ), + subTitle: GoogleFonts.montserrat( + fontSize: 11, + fontWeight: FontWeight.w400, + ), + radius: BorderRadius.circular(12), + padding: const EdgeInsets.all(13), + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)), + borderColors: const MultiColor(Constants.greyGradient), + stroke: 1, + ); + return FileSelectionButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + foregroundColors: const MultiColor.single(Constants.grey1), + backgroundColors: const MultiColor.single(Constants.grey4), + ), + hoveredStyle: style.copyWith( + borderColors: const MultiColor.single(Constants.white), + ), + focusedStyle: style.copyWith(stroke: 3), + tappedStyle: style.copyWith( + backgroundColors: const MultiColor(Constants.greyDarkGradient), + ), + invalidStyle: style.copyWith( + subTitle: GoogleFonts.montserrat( + fontSize: 11, + fontWeight: FontWeight.w400, + color: Constants.red1, + ), + borderColors: const MultiColor(Constants.redGradient), + ), + // Unused + selectedStyle: style.copyWith( + foregroundColors: const MultiColor.single(Constants.white), + borderColors: const MultiColor(Constants.greenGradient), + ), + ); + } + + @override + ThemeExtension copyWith({ + FileSelectionButtonStyle? disabledStyle, + FileSelectionButtonStyle? focusedStyle, + FileSelectionButtonStyle? hoveredStyle, + FileSelectionButtonStyle? normalStyle, + FileSelectionButtonStyle? tappedStyle, + FileSelectionButtonStyle? selectedStyle, + FileSelectionButtonStyle? invalidStyle, + }) => + FileSelectionButtonTheme( + disabledStyle: disabledStyle ?? this.disabledStyle, + focusedStyle: focusedStyle ?? this.focusedStyle, + hoveredStyle: hoveredStyle ?? this.hoveredStyle, + normalStyle: normalStyle ?? this.normalStyle, + tappedStyle: tappedStyle ?? this.tappedStyle, + selectedStyle: selectedStyle ?? this.selectedStyle, + invalidStyle: invalidStyle ?? this.invalidStyle, + ); + + @override + ThemeExtension lerp( + covariant ThemeExtension? other, + double t, + ) { + if (other is! FileSelectionButtonTheme) { + return this; + } + return FileSelectionButtonTheme( + disabledStyle: + FileSelectionButtonStyle.lerp(disabledStyle, other.disabledStyle, t), + focusedStyle: + FileSelectionButtonStyle.lerp(focusedStyle, other.focusedStyle, t), + hoveredStyle: + FileSelectionButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t), + normalStyle: + FileSelectionButtonStyle.lerp(normalStyle, other.normalStyle, t), + tappedStyle: + FileSelectionButtonStyle.lerp(tappedStyle, other.tappedStyle, t), + selectedStyle: + FileSelectionButtonStyle.lerp(selectedStyle, other.selectedStyle, t), + invalidStyle: + FileSelectionButtonStyle.lerp(invalidStyle, other.invalidStyle, t), + ); + } +} diff --git a/packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart index 71c5e792..8b8768e0 100644 --- a/packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart +++ b/packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart @@ -64,6 +64,7 @@ class FlatButtonTheme extends FlatButtonThemeExtension { foregroundColors: const MultiColor.single(Constants.white), backgroundColors: const MultiColor(Constants.blueGradient), ), + focusedStyle: style.copyWith(stroke: 5), tappedStyle: style.copyWith( label: GoogleFonts.montserrat( fontSize: 18, @@ -107,6 +108,7 @@ class FlatButtonTheme extends FlatButtonThemeExtension { foregroundColors: const MultiColor.single(Constants.white), backgroundColors: const MultiColor(Constants.blueGradient), ), + focusedStyle: style.copyWith(stroke: 5), tappedStyle: style.copyWith( foregroundColors: const MultiColor.single(Constants.white), backgroundColors: const MultiColor(Constants.blueDarkGradient), diff --git a/packages/wyatt_ui_kit/example/lib/theme/simple_icon_button_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/simple_icon_button_theme.dart new file mode 100644 index 00000000..3e5c7e0e --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/simple_icon_button_theme.dart @@ -0,0 +1,114 @@ +// 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 . + +import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; +import 'package:wyatt_ui_kit/wyatt_ui_kit.dart'; +import 'package:wyatt_ui_kit_example/theme/constants.dart'; + +class SimpleIconButtonTheme extends SimpleIconButtonThemeExtension { + const SimpleIconButtonTheme({ + super.disabledStyle, + super.focusedStyle, + super.hoveredStyle, + super.normalStyle, + super.tappedStyle, + }); + + factory SimpleIconButtonTheme.light() { + final style = SimpleIconButtonStyle( + dimension: 30, + radius: BorderRadius.circular(5), + padding: const EdgeInsets.all(5), + foregroundColors: const MultiColor.single(Constants.dark), + backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.2)), + ); + return SimpleIconButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + foregroundColors: MultiColor.single(Constants.dark.withOpacity(0.4)), + ), + hoveredStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), + ), + focusedStyle: style, + tappedStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.5)), + ), + ); + } + + factory SimpleIconButtonTheme.dark() { + final style = SimpleIconButtonStyle( + dimension: 30, + radius: BorderRadius.circular(5), + padding: const EdgeInsets.all(5), + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: MultiColor.single(Constants.grey3.withOpacity(0.2)), + ); + return SimpleIconButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + foregroundColors: MultiColor.single(Constants.white.withOpacity(0.4)), + ), + hoveredStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey3.withOpacity(0.4)), + ), + focusedStyle: style, + tappedStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey3.withOpacity(0.5)), + ), + ); + } + + @override + ThemeExtension copyWith({ + SimpleIconButtonStyle? disabledStyle, + SimpleIconButtonStyle? focusedStyle, + SimpleIconButtonStyle? hoveredStyle, + SimpleIconButtonStyle? normalStyle, + SimpleIconButtonStyle? tappedStyle, + }) => + SimpleIconButtonTheme( + disabledStyle: disabledStyle ?? this.disabledStyle, + focusedStyle: focusedStyle ?? this.focusedStyle, + hoveredStyle: hoveredStyle ?? this.hoveredStyle, + normalStyle: normalStyle ?? this.normalStyle, + tappedStyle: tappedStyle ?? this.tappedStyle, + ); + + @override + ThemeExtension lerp( + covariant ThemeExtension? other, + double t, + ) { + if (other is! SimpleIconButtonTheme) { + return this; + } + return SimpleIconButtonTheme( + disabledStyle: + SimpleIconButtonStyle.lerp(disabledStyle, other.disabledStyle, t), + focusedStyle: + SimpleIconButtonStyle.lerp(focusedStyle, other.focusedStyle, t), + hoveredStyle: + SimpleIconButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t), + normalStyle: + SimpleIconButtonStyle.lerp(normalStyle, other.normalStyle, t), + tappedStyle: + SimpleIconButtonStyle.lerp(tappedStyle, other.tappedStyle, t), + ); + } +} diff --git a/packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart index 6d181638..74a9a19d 100644 --- a/packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart +++ b/packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart @@ -59,6 +59,7 @@ class SymbolButtonTheme extends SymbolButtonThemeExtension { hoveredStyle: style.copyWith( backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), ), + focusedStyle: style.copyWith(stroke: 4), tappedStyle: style.copyWith( backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), ), @@ -101,6 +102,7 @@ class SymbolButtonTheme extends SymbolButtonThemeExtension { hoveredStyle: style.copyWith( backgroundColors: const MultiColor(Constants.greyDarkGradient), ), + focusedStyle: style.copyWith(stroke: 4), tappedStyle: style.copyWith( backgroundColors: const MultiColor(Constants.greyDarkGradient), ), diff --git a/packages/wyatt_ui_kit/example/lib/theme/themes.dart b/packages/wyatt_ui_kit/example/lib/theme/themes.dart index 62128247..ab8720fb 100644 --- a/packages/wyatt_ui_kit/example/lib/theme/themes.dart +++ b/packages/wyatt_ui_kit/example/lib/theme/themes.dart @@ -17,14 +17,16 @@ import 'package:adaptive_theme/adaptive_theme.dart'; import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.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/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 { static int currentThemeIndex = 0; - + static List> themes = [ {materialLight, materialDark}, {studioLight, studioDark}, @@ -34,6 +36,7 @@ abstract class Themes { currentThemeIndex = themeId; return themes[themeId].first; } + static ThemeData darkFromTheme(int themeId) { currentThemeIndex = themeId; return themes[themeId].last; @@ -102,6 +105,8 @@ abstract class Themes { ), FlatButtonTheme.light(), SymbolButtonTheme.light(), + SimpleIconButtonTheme.light(), + FileSelectionButtonTheme.light(), ], ); @@ -147,6 +152,8 @@ abstract class Themes { ), FlatButtonTheme.dark(), SymbolButtonTheme.dark(), + SimpleIconButtonTheme.dark(), + FileSelectionButtonTheme.dark(), ], ); } diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart index 999232a7..b763751c 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart @@ -221,7 +221,7 @@ class FileSelectionButtonScreen children: [ if (leading != null) ...[ leading ?? const SizedBox.shrink(), - Gap(style.padding?.horizontal ?? 10), + Gap((style.padding?.horizontal ?? 10)/2), ], Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -239,7 +239,6 @@ class FileSelectionButtonScreen /// /// More infos in `negociate()` method if (title != null) ...[ - Gap(style.padding?.vertical ?? 10), Text( title!.text, style: title!.style ?? style.title, @@ -266,7 +265,7 @@ class FileSelectionButtonScreen /// /// More infos in `negociate()` method if (subTitle != null) ...[ - Gap(style.padding?.vertical ?? 10), + const Gap(5), Text( subTitle!.text, style: subTitle!.style ?? style.subTitle,