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,