From cc71bf7abdcbbc66a7abe1d6043ab731eb3febaa Mon Sep 17 00:00:00 2001 From: Hugo Pointcheval Date: Wed, 15 Feb 2023 21:07:53 +0100 Subject: [PATCH] feat(ui_kit): finalize material ready buttons --- .../example/lib/buttons/buttons.dart | 361 +----------------- .../file_selection_buttons.dart | 121 ++++++ .../lib/buttons/flat_button/flat_buttons.dart | 81 ++++ .../simple_icon_buttons.dart | 112 ++++++ .../buttons/symbol_button/symbol_buttons.dart | 126 ++++++ packages/wyatt_ui_kit/example/lib/main.dart | 12 +- .../example/lib/theme/constants.dart | 46 +++ .../example/lib/theme/flat_button_theme.dart | 151 ++++++++ .../lib/theme/symbol_button_theme.dart | 155 ++++++++ .../buttons/cubit/invalid_button_cubit.dart | 5 - .../file_selection_button_screen.dart | 5 +- .../file_selection_button_theme_resolver.dart | 53 ++- .../simple_icon_button_theme_resolver.dart | 46 ++- .../symbol_button_theme_resolver.dart | 2 +- 14 files changed, 898 insertions(+), 378 deletions(-) create mode 100644 packages/wyatt_ui_kit/example/lib/buttons/file_selection_button/file_selection_buttons.dart create mode 100644 packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart create mode 100644 packages/wyatt_ui_kit/example/lib/buttons/simple_icon_button/simple_icon_buttons.dart create mode 100644 packages/wyatt_ui_kit/example/lib/buttons/symbol_button/symbol_buttons.dart create mode 100644 packages/wyatt_ui_kit/example/lib/theme/constants.dart create mode 100644 packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart create mode 100644 packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart diff --git a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart index 6b224ded..959cfbfd 100644 --- a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart +++ b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart @@ -16,28 +16,17 @@ import 'package:flutter/material.dart'; import 'package:gap/gap.dart'; -import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; -import 'package:wyatt_ui_kit/wyatt_ui_kit.dart'; - -const _color1 = Color(0xFF3C97FB); -const _color2 = Color(0xFF446DF4); -const _color3 = Color.fromARGB(255, 26, 132, 247); -const _color4 = Color.fromARGB(255, 19, 68, 228); -const _colors = [_color1, _color2]; -const _colorsDarken = [_color3, _color4]; -const _disabled = Color(0xFF6B7280); -const _background = Color(0xFF16191D); -const _disabledBackground = Color(0xFF16191D + 0x66FFFFFF); -const _disabledColors = [Color(0xFF60656A), Color(0xFF383C40)]; -const _selectedColors = [Color(0xFF50CE99), Color(0xFF339572)]; -const _invalidColor = Color(0xFFFB5E3C); +import 'package:wyatt_ui_kit_example/buttons/file_selection_button/file_selection_buttons.dart'; +import 'package:wyatt_ui_kit_example/buttons/flat_button/flat_buttons.dart'; +import 'package:wyatt_ui_kit_example/buttons/simple_icon_button/simple_icon_buttons.dart'; +import 'package:wyatt_ui_kit_example/buttons/symbol_button/symbol_buttons.dart'; class Buttons extends StatelessWidget { const Buttons({super.key}); @override Widget build(BuildContext context) => ListView( - cacheExtent: 2000, + cacheExtent: 1000, children: [ const Gap(20), Align( @@ -47,337 +36,19 @@ class Buttons extends StatelessWidget { ), ), const Gap(20), - Center( - child: FlatButton( - label: const TextWrapper('Voir notre savoir faire'), - normalStyle: const FlatButtonStyle( - foregroundColors: MultiColor(_colors), - backgroundColors: MultiColor.single(Colors.transparent), - borderColors: MultiColor(_colors), - stroke: 3, - ), - hoveredStyle: const FlatButtonStyle( - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: MultiColor(_colors), - borderColors: MultiColor(_colors), - stroke: 3, - ), - tappedStyle: const FlatButtonStyle( - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: MultiColor(_colorsDarken), - borderColors: MultiColor(_colorsDarken), - stroke: 3, - ), - prefix: const Icon( - Icons.arrow_forward_rounded, - ), - suffix: const Icon( - Icons.arrow_forward_rounded, - ), - ), - ), - const Gap(20), - FlatButton( - label: TextWrapper( - 'Voir notre savoir faire', - style: - context.textTheme.titleLarge?.copyWith(color: Colors.white), - ), - normalStyle: const FlatButtonStyle( - backgroundColors: MultiColor(_colors), - ), - prefix: const Icon( - Icons.arrow_forward_rounded, - color: Colors.white, - ), - suffix: const Icon( - Icons.arrow_forward_rounded, - color: Colors.white, - ), - ), - const Gap(20), - ColoredBox( - color: _background, - child: Center( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Column( - children: [ - const Gap(20), - FlatButton( - label: TextWrapper( - 'Démarrer mon projet', - style: context.textTheme.titleLarge - ?.copyWith(color: _disabled), - ), - normalStyle: const FlatButtonStyle( - borderColors: MultiColor(_disabledColors), - backgroundColors: - MultiColor.single(_disabledBackground), - stroke: 1, - ), - ), - const Gap(20), - FlatButton( - label: TextWrapper( - 'Démarrer mon projet', - style: context.textTheme.titleLarge - ?.copyWith(color: Colors.white), - ), - normalStyle: const FlatButtonStyle( - backgroundColors: MultiColor(_colors), - ), - ), - const Gap(20), - ], - ), - const Gap(20), - Column( - children: [ - const Gap(20), - FlatButton( - label: TextWrapper( - 'Aller voir nos réalisations', - style: context.textTheme.titleLarge - ?.copyWith(color: Colors.white), - ), - normalStyle: const FlatButtonStyle( - borderColors: MultiColor(_colors), - backgroundColors: - MultiColor.single(_disabledBackground), - stroke: 3, - ), - suffix: const Icon( - Icons.arrow_forward_rounded, - color: Colors.white, - ), - ), - const Gap(20), - FlatButton( - label: TextWrapper( - 'Aller voir nos réalisations', - style: context.textTheme.titleLarge - ?.copyWith(color: Colors.white), - ), - normalStyle: const FlatButtonStyle( - backgroundColors: MultiColor(_colors), - ), - suffix: const Icon( - Icons.arrow_forward_rounded, - color: Colors.white, - ), - ), - const Gap(20), - ], - ), - ], - ), - ), - ), - const Gap(20), - FlatButton( - label: TextWrapper( - 'Démarrer mon projet', - style: - context.textTheme.titleLarge?.copyWith(color: Colors.white), - ), - disabledStyle: const FlatButtonStyle( - backgroundColors: MultiColor.single(Colors.blue), - ), - normalStyle: const FlatButtonStyle( - backgroundColors: MultiColor(_colors), - ), - hoveredStyle: const FlatButtonStyle( - backgroundColors: MultiColor.single(Colors.green), - ), - focusedStyle: const FlatButtonStyle( - backgroundColors: MultiColor.single(Colors.yellow), - ), - tappedStyle: const FlatButtonStyle( - backgroundColors: MultiColor.single(Colors.red), - ), - ), - const Gap(20), - ColoredBox( - color: _background, - child: Center( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Column( - children: [ - const Gap(20), - SymbolButton( - icon: const Icon( - Icons.android, - size: 25, - ), - label: const TextWrapper('Texte'), - normalStyle: const SymbolButtonStyle( - borderColors: MultiColor(_disabledColors), - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: - MultiColor.single(_disabledBackground), - stroke: 1, - ), - hoveredStyle: const SymbolButtonStyle( - borderColors: MultiColor(_disabledColors), - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: MultiColor.single(_background), - stroke: 1, - ), - selectedStyle: const SymbolButtonStyle( - borderColors: MultiColor(_selectedColors), - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: - MultiColor.single(_disabledBackground), - stroke: 1, - ), - ) - ..bloc.onClickUpIn() - ..bloc.freeze(), - const Gap(20), - SymbolButton( - icon: const Icon( - Icons.android, - size: 25, - ), - label: const TextWrapper('Texte'), - normalStyle: const SymbolButtonStyle( - borderColors: MultiColor(_disabledColors), - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: - MultiColor.single(_disabledBackground), - stroke: 1, - ), - hoveredStyle: const SymbolButtonStyle( - borderColors: MultiColor(_disabledColors), - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: MultiColor.single(_background), - stroke: 1, - ), - selectedStyle: const SymbolButtonStyle( - borderColors: MultiColor(_selectedColors), - foregroundColors: MultiColor.single(Colors.white), - backgroundColors: - MultiColor.single(_disabledBackground), - stroke: 1, - ), - )..bloc.freeze(), - const Gap(20), - ], - ), - const Gap(20), - Row( - children: [ - SimpleIconButton( - icon: const Icon( - Icons.storm_outlined, - size: 17, - ), - normalStyle: const SimpleIconButtonStyle( - backgroundColors: MultiColor.single(_disabled), - ), - hoveredStyle: SimpleIconButtonStyle( - backgroundColors: - MultiColor.single(_disabledColors.last), - ), - ), - const Gap(10), - SimpleIconButton( - icon: const Icon( - Icons.sunny, - size: 17, - ), - normalStyle: const SimpleIconButtonStyle( - backgroundColors: MultiColor.single(_disabled), - ), - hoveredStyle: SimpleIconButtonStyle( - backgroundColors: - MultiColor.single(_disabledColors.last), - ), - ), - const Gap(10), - SimpleIconButton( - icon: const Icon( - Icons.wechat, - size: 17, - ), - normalStyle: const SimpleIconButtonStyle( - backgroundColors: MultiColor.single(_disabled), - ), - hoveredStyle: SimpleIconButtonStyle( - backgroundColors: - MultiColor.single(_disabledColors.last), - ), - ) - ], - ), - const Gap(20), - Row( - children: [ - SymbolButton( - icon: const FlutterLogo( - size: 50, - ), - normalStyle: const SymbolButtonStyle( - dimension: 73, - backgroundColors: MultiColor.single(Colors.white), - ), - hoveredStyle: SymbolButtonStyle( - dimension: 73, - backgroundColors: MultiColor.single(Colors.grey[300]), - ), - ), - ], - ), - const Gap(20), - FileSelectionButton( - leading: const DecoratedBox( - decoration: BoxDecoration( - color: _disabled, - borderRadius: BorderRadius.all( - Radius.circular(5), - ), - ), - child: Padding( - padding: EdgeInsets.all(8), - child: Icon( - Icons.file_upload_outlined, - color: Colors.white, - ), - ), - ), - title: TextWrapper( - 'Ajouter un fichier', - style: Theme.of(context) - .textTheme - .titleLarge - ?.copyWith(color: _disabled), - ), - subTitle: TextWrapper.text('Taille max: 20 Mo'), - normalStyle: const FileSelectionButtonStyle( - backgroundColors: MultiColor.single(_disabledBackground), - foregroundColors: MultiColor.single(_disabled), - borderColors: MultiColor.single(_disabled), - ), - hoveredStyle: const FileSelectionButtonStyle( - backgroundColors: MultiColor.single(_disabledBackground), - foregroundColors: MultiColor.single(_disabled), - borderColors: MultiColor.single(Colors.white), - ), - invalidStyle: const FileSelectionButtonStyle( - backgroundColors: MultiColor.single(_disabledBackground), - foregroundColors: MultiColor.single(_invalidColor), - borderColors: MultiColor.single(_invalidColor), - ), - ) - ], - ), - ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + FlatButtons(), + Gap(20), + SymbolButtons(), + Gap(20), + SimpleIconButtons(), + ], ), const Gap(20), + const Align(child: FileSelectionButtons()), ], ); } 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 new file mode 100644 index 00000000..0a2591d7 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/buttons/file_selection_button/file_selection_buttons.dart @@ -0,0 +1,121 @@ +// 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:gap/gap.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 FileSelectionButtons extends StatelessWidget { + const FileSelectionButtons({super.key}); + + Widget _leading() => const DecoratedBox( + decoration: BoxDecoration( + color: Constants.grey3, + borderRadius: BorderRadius.all( + Radius.circular(5), + ), + ), + child: Padding( + padding: EdgeInsets.all(8), + child: Icon( + Icons.file_upload_outlined, + color: Colors.white, + ), + ), + ); + + @override + Widget build(BuildContext context) => Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'FileSelection Buttons', + style: Theme.of(context).textTheme.titleMedium, + ), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Ajouter un fichier', + ), + subTitle: const TextWrapper('Taille max: 20 Mo'), + ), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Enabled', + ), + subTitle: const TextWrapper('Subtitle'), + ) + ..bloc.enable() + ..bloc.freeze(), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Disabled', + ), + subTitle: const TextWrapper('Subtitle'), + ) + ..bloc.disable() + ..bloc.freeze(), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Hovered', + ), + subTitle: const TextWrapper('Subtitle'), + ) + ..bloc.onMouseEnter() + ..bloc.freeze(), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Focused', + ), + subTitle: const TextWrapper('Subtitle'), + ) + ..bloc.onFocus() + ..bloc.freeze(), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Tapped', + ), + subTitle: const TextWrapper('Subtitle'), + ) + ..bloc.onClickDown() + ..bloc.freeze(), + const Gap(20), + FileSelectionButton( + leading: _leading(), + title: const TextWrapper( + 'Invalid', + ), + subTitle: const TextWrapper('Subtitle'), + ) + ..bloc.invalidate() + ..bloc.freeze(), + const Gap(20), + ], + ); +} diff --git a/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart new file mode 100644 index 00000000..2a4d684f --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart @@ -0,0 +1,81 @@ +// 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:gap/gap.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; +import 'package:wyatt_ui_kit/wyatt_ui_kit.dart'; + +class FlatButtons extends StatelessWidget { + const FlatButtons({super.key}); + + @override + Widget build(BuildContext context) => Column( + children: [ + Text( + 'Flat Buttons', + style: Theme.of(context).textTheme.titleMedium, + ), + const Gap(20), + Center( + child: FlatButton( + label: const TextWrapper('Voir notre savoir faire'), + ), + ), + const Gap(20), + Center( + child: FlatButton( + label: const TextWrapper('Enabled'), + ) + ..bloc.enable() + ..bloc.freeze(), + ), + const Gap(20), + Center( + child: FlatButton( + label: const TextWrapper('Disabled'), + ) + ..bloc.disable() + ..bloc.freeze(), + ), + const Gap(20), + Center( + child: FlatButton( + label: const TextWrapper('Hovered'), + ) + ..bloc.onMouseEnter() + ..bloc.freeze(), + ), + const Gap(20), + Center( + child: FlatButton( + label: const TextWrapper('Focused'), + ) + ..bloc.onFocus() + ..bloc.freeze(), + ), + const Gap(20), + Center( + child: FlatButton( + label: const TextWrapper('Tapped'), + ) + ..bloc.onClickDown() + ..bloc.freeze(), + ), + const Gap(20), + ], + ); +} diff --git a/packages/wyatt_ui_kit/example/lib/buttons/simple_icon_button/simple_icon_buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/simple_icon_button/simple_icon_buttons.dart new file mode 100644 index 00000000..1de93f70 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/buttons/simple_icon_button/simple_icon_buttons.dart @@ -0,0 +1,112 @@ +// 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:gap/gap.dart'; +import 'package:wyatt_ui_kit/wyatt_ui_kit.dart'; + +class SimpleIconButtons extends StatelessWidget { + const SimpleIconButtons({super.key}); + + @override + Widget build(BuildContext context) => Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'SimpleIcon Buttons', + style: Theme.of(context).textTheme.titleMedium, + ), + const Gap(20), + SimpleIconButton( + icon: const Icon( + Icons.storm_outlined, + size: 17, + ), + ), + const Gap(20), + Text( + 'Enabled', + style: Theme.of(context).textTheme.labelMedium, + ), + const Gap(10), + SimpleIconButton( + icon: const Icon( + Icons.storm_outlined, + size: 17, + ), + ) + ..bloc.enable() + ..bloc.freeze(), + const Gap(20), + Text( + 'Disabled', + style: Theme.of(context).textTheme.labelMedium, + ), + const Gap(10), + SimpleIconButton( + icon: const Icon( + Icons.storm_outlined, + size: 17, + ), + ) + ..bloc.disable() + ..bloc.freeze(), + const Gap(20), + Text( + 'Hovered', + style: Theme.of(context).textTheme.labelMedium, + ), + const Gap(10), + SimpleIconButton( + icon: const Icon( + Icons.storm_outlined, + size: 17, + ), + ) + ..bloc.onMouseEnter() + ..bloc.freeze(), + const Gap(20), + Text( + 'Focused', + style: Theme.of(context).textTheme.labelMedium, + ), + const Gap(10), + SimpleIconButton( + icon: const Icon( + Icons.storm_outlined, + size: 17, + ), + ) + ..bloc.onFocus() + ..bloc.freeze(), + const Gap(20), + Text( + 'Tapped', + style: Theme.of(context).textTheme.labelMedium, + ), + const Gap(10), + SimpleIconButton( + icon: const Icon( + Icons.storm_outlined, + size: 17, + ), + ) + ..bloc.onClickDown() + ..bloc.freeze(), + const Gap(20), + ], + ); +} 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 new file mode 100644 index 00000000..ab426769 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/buttons/symbol_button/symbol_buttons.dart @@ -0,0 +1,126 @@ +// 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:gap/gap.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 SymbolButtons extends StatelessWidget { + const SymbolButtons({super.key}); + + @override + Widget build(BuildContext context) => Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Symbol Buttons', + style: Theme.of(context).textTheme.titleMedium, + ), + const Gap(20), + SymbolButton( + label: const TextWrapper('Text'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ), + const Gap(20), + SymbolButton( + label: const TextWrapper('Enabled'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ) + ..bloc.enable() + ..bloc.freeze(), + const Gap(20), + SymbolButton( + label: const TextWrapper('Disabled'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ) + ..bloc.disable() + ..bloc.freeze(), + const Gap(20), + SymbolButton( + label: const TextWrapper('Hovered'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ) + ..bloc.onMouseEnter() + ..bloc.freeze(), + const Gap(20), + SymbolButton( + label: const TextWrapper('Focused'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ) + ..bloc.onFocus() + ..bloc.freeze(), + const Gap(20), + SymbolButton( + label: const TextWrapper('Tapped'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ) + ..bloc.onClickDown() + ..bloc.freeze(), + const Gap(20), + SymbolButton( + label: const TextWrapper('Selected'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ) + ..bloc.select() + ..bloc.freeze(), + const Gap(20), + DecoratedBox( + decoration: BoxDecoration( + border: Border.all(color: Constants.red1), + ), + child: SymbolButton( + label: const TextWrapper('Trigger zone'), + icon: const Icon( + Icons.android, + size: 25, + color: Constants.white, + ), + ), + ), + const Gap(20), + ], + ); +} diff --git a/packages/wyatt_ui_kit/example/lib/main.dart b/packages/wyatt_ui_kit/example/lib/main.dart index 48398c02..1776ee88 100644 --- a/packages/wyatt_ui_kit/example/lib/main.dart +++ b/packages/wyatt_ui_kit/example/lib/main.dart @@ -23,9 +23,11 @@ import 'package:wyatt_ui_kit_example/theme_extension.dart'; void main(List args) { const forcePage = int.fromEnvironment('PAGE'); - runApp(const App( - defaultPage: forcePage, - ),); + runApp( + const App( + defaultPage: forcePage, + ), + ); } class App extends StatelessWidget { @@ -74,6 +76,8 @@ class App extends StatelessWidget { color: const Color.fromRGBO(36, 38, 42, 1), ), ), + // FlatButtonTheme.light(), + // SymbolButtonTheme.light(), ], ), dark: ThemeData.dark().copyWith( @@ -114,6 +118,8 @@ class App extends StatelessWidget { color: Colors.white, ), ), + // FlatButtonTheme.dark(), + // SymbolButtonTheme.dark(), ], ), builder: (light, dark) => MaterialApp( diff --git a/packages/wyatt_ui_kit/example/lib/theme/constants.dart b/packages/wyatt_ui_kit/example/lib/theme/constants.dart new file mode 100644 index 00000000..33152394 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/constants.dart @@ -0,0 +1,46 @@ +// 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/widgets.dart'; + +abstract class Constants { + static const white = Color(0xFFFFFFFF); + static const dark = Color(0xFF383C40); + + static const blue1 = Color(0xFF3C97FB); + static const blue2 = Color(0xFF446DF4); + static const blue3 = Color(0xFF1A84F7); + static const blue4 = Color(0xFF1344E4); + + static const grey1 = Color(0xFF60656A); + static const grey2 = Color(0xFF383C40); + + static const grey3 = Color(0xFF16191D); + static const grey4 = Color(0xFF33373E); + + static const green1 = Color(0xFF50CE99); + static const green2 = Color(0xFF339572); + + static const red1 = Color(0xFFFB5E3C); + static const red2 = Color(0xFFF44464); + + static const blueGradient = [blue1, blue2]; + static const blueDarkGradient = [blue3, blue4]; + static const greyGradient = [grey1, grey2]; + static const greyDarkGradient = [grey3, grey4]; + static const greenGradient = [green1, green2]; + static const redGradient = [red1, red2]; +} 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 new file mode 100644 index 00000000..71c5e792 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart @@ -0,0 +1,151 @@ +// 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 FlatButtonTheme extends FlatButtonThemeExtension { + const FlatButtonTheme({ + super.disabledStyle, + super.focusedStyle, + super.hoveredStyle, + super.normalStyle, + super.tappedStyle, + }); + + factory FlatButtonTheme.light() { + final style = FlatButtonStyle( + label: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w600, + ), + radius: BorderRadius.circular(15), + padding: const EdgeInsets.all(10), + foregroundColors: const MultiColor(Constants.blueGradient), + backgroundColors: const MultiColor.single(Constants.white), + borderColors: const MultiColor(Constants.blueGradient), + stroke: 3, + ); + return FlatButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Constants.blue1.withOpacity(0.4), + ), + foregroundColors: MultiColor.single(Constants.blue1.withOpacity(0.4)), + backgroundColors: const MultiColor.single(Constants.white), + borderColors: MultiColor.single(Constants.blue1.withOpacity(0.4)), + stroke: 1, + ), + hoveredStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Constants.white, + ), + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: const MultiColor(Constants.blueGradient), + ), + tappedStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Constants.white, + ), + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: const MultiColor(Constants.blueDarkGradient), + borderColors: const MultiColor(Constants.blueDarkGradient), + ), + ); + } + + factory FlatButtonTheme.dark() { + final style = FlatButtonStyle( + label: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w600, + ), + radius: BorderRadius.circular(15), + padding: const EdgeInsets.all(10), + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: const MultiColor.single(Constants.dark), + borderColors: const MultiColor(Constants.blueGradient), + stroke: 3, + ); + return FlatButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Constants.grey1, + ), + foregroundColors: const MultiColor.single(Constants.grey1), + backgroundColors: const MultiColor.single(Constants.grey4), + borderColors: const MultiColor(Constants.greyGradient), + stroke: 1, + ), + hoveredStyle: style.copyWith( + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: const MultiColor(Constants.blueGradient), + ), + tappedStyle: style.copyWith( + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: const MultiColor(Constants.blueDarkGradient), + borderColors: const MultiColor(Constants.blueDarkGradient), + ), + ); + } + + @override + ThemeExtension copyWith({ + FlatButtonStyle? disabledStyle, + FlatButtonStyle? focusedStyle, + FlatButtonStyle? hoveredStyle, + FlatButtonStyle? normalStyle, + FlatButtonStyle? tappedStyle, + }) => + FlatButtonTheme( + 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! FlatButtonTheme) { + return this; + } + return FlatButtonTheme( + disabledStyle: + FlatButtonStyle.lerp(disabledStyle, other.disabledStyle, t), + focusedStyle: FlatButtonStyle.lerp(focusedStyle, other.focusedStyle, t), + hoveredStyle: FlatButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t), + normalStyle: FlatButtonStyle.lerp(normalStyle, other.normalStyle, t), + tappedStyle: FlatButtonStyle.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 new file mode 100644 index 00000000..6d181638 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart @@ -0,0 +1,155 @@ +// 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 SymbolButtonTheme extends SymbolButtonThemeExtension { + const SymbolButtonTheme({ + super.disabledStyle, + super.focusedStyle, + super.hoveredStyle, + super.normalStyle, + super.tappedStyle, + super.selectedStyle, + }); + + factory SymbolButtonTheme.light() { + final style = SymbolButtonStyle( + label: GoogleFonts.montserrat( + fontSize: 14, + fontWeight: FontWeight.w400, + ), + dimension: 60, + 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 SymbolButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 14, + fontWeight: FontWeight.w400, + color: Constants.grey1, + ), + 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)), + ), + tappedStyle: style.copyWith( + backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)), + ), + selectedStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 14, + fontWeight: FontWeight.w600, + ), + foregroundColors: const MultiColor.single(Constants.grey2), + borderColors: const MultiColor(Constants.greenGradient), + ), + ); + } + + factory SymbolButtonTheme.dark() { + final style = SymbolButtonStyle( + label: GoogleFonts.montserrat( + fontSize: 14, + fontWeight: FontWeight.w400, + ), + dimension: 60, + radius: BorderRadius.circular(12), + padding: const EdgeInsets.all(10), + foregroundColors: const MultiColor.single(Constants.white), + backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)), + borderColors: const MultiColor(Constants.greyGradient), + stroke: 2, + ); + return SymbolButtonTheme( + normalStyle: style, + disabledStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 14, + fontWeight: FontWeight.w400, + color: Constants.grey1, + ), + foregroundColors: const MultiColor.single(Constants.grey1), + backgroundColors: const MultiColor.single(Constants.grey4), + ), + hoveredStyle: style.copyWith( + backgroundColors: const MultiColor(Constants.greyDarkGradient), + ), + tappedStyle: style.copyWith( + backgroundColors: const MultiColor(Constants.greyDarkGradient), + ), + selectedStyle: style.copyWith( + label: GoogleFonts.montserrat( + fontSize: 14, + fontWeight: FontWeight.w600, + ), + foregroundColors: const MultiColor.single(Constants.white), + borderColors: const MultiColor(Constants.greenGradient), + ), + ); + } + + @override + ThemeExtension copyWith({ + SymbolButtonStyle? disabledStyle, + SymbolButtonStyle? focusedStyle, + SymbolButtonStyle? hoveredStyle, + SymbolButtonStyle? normalStyle, + SymbolButtonStyle? tappedStyle, + SymbolButtonStyle? selectedStyle, + }) => + SymbolButtonTheme( + disabledStyle: disabledStyle ?? this.disabledStyle, + focusedStyle: focusedStyle ?? this.focusedStyle, + hoveredStyle: hoveredStyle ?? this.hoveredStyle, + normalStyle: normalStyle ?? this.normalStyle, + tappedStyle: tappedStyle ?? this.tappedStyle, + selectedStyle: selectedStyle ?? this.selectedStyle, + ); + + @override + ThemeExtension lerp( + covariant ThemeExtension? other, + double t, + ) { + if (other is! SymbolButtonTheme) { + return this; + } + return SymbolButtonTheme( + disabledStyle: + SymbolButtonStyle.lerp(disabledStyle, other.disabledStyle, t), + focusedStyle: SymbolButtonStyle.lerp(focusedStyle, other.focusedStyle, t), + hoveredStyle: SymbolButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t), + normalStyle: SymbolButtonStyle.lerp(normalStyle, other.normalStyle, t), + tappedStyle: SymbolButtonStyle.lerp(tappedStyle, other.tappedStyle, t), + selectedStyle: + SymbolButtonStyle.lerp(selectedStyle, other.selectedStyle, t), + ); + } +} diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/cubit/invalid_button_cubit.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/cubit/invalid_button_cubit.dart index e90832d8..30626192 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/cubit/invalid_button_cubit.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/cubit/invalid_button_cubit.dart @@ -15,7 +15,6 @@ // along with this program. If not, see . import 'dart:async'; -import 'dart:math'; import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart'; @@ -30,8 +29,6 @@ class InvalidButtonCubit extends ButtonCubit { emit( state.copyWith( state: ControlState.hovered, - // TODO(hpcl): change this - invalid: Random().nextBool(), ), ); } @@ -45,8 +42,6 @@ class InvalidButtonCubit extends ButtonCubit { emit( state.copyWith( state: ControlState.normal, - // TODO(hpcl): change this - invalid: Random().nextBool(), ), ); } 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 a8a121bc..999232a7 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 @@ -218,7 +218,6 @@ class FileSelectionButtonScreen padding: style.padding ?? EdgeInsets.zero, child: Row( mainAxisSize: mainAxisSize ?? MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ if (leading != null) ...[ leading ?? const SizedBox.shrink(), @@ -240,7 +239,7 @@ class FileSelectionButtonScreen /// /// More infos in `negociate()` method if (title != null) ...[ - Gap(style.padding?.horizontal ?? 10), + Gap(style.padding?.vertical ?? 10), Text( title!.text, style: title!.style ?? style.title, @@ -267,7 +266,7 @@ class FileSelectionButtonScreen /// /// More infos in `negociate()` method if (subTitle != null) ...[ - Gap(style.padding?.horizontal ?? 10), + Gap(style.padding?.vertical ?? 10), Text( subTitle!.text, style: subTitle!.style ?? style.subTitle, diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart index 85cccdcf..7c1f9634 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart @@ -30,17 +30,48 @@ class FileSelectionButtonThemeResolver extends ThemeResolver< FileSelectionButtonStyle computeDefaultValue( BuildContext context, { ButtonState? extra, - }) => - FileSelectionButtonStyle( - title: context.textTheme.labelLarge, - subTitle: context.textTheme.labelSmall, - radius: (context.buttonTheme.shape is RoundedRectangleBorder) - ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius - : null, - padding: context.buttonTheme.padding, - foregroundColors: MultiColor.single(context.colorScheme.onPrimary), - backgroundColors: MultiColor.single(context.colorScheme.primary), - ); + }) { + MultiColor backgroundColor = MultiColor.single(context.colorScheme.primary); + MultiColor foregroundColor = + MultiColor.single(context.colorScheme.onPrimary); + + switch (extra?.state) { + case ControlState.disabled: + backgroundColor = + MultiColor.single(context.colorScheme.onSurface.withOpacity(0.12)); + foregroundColor = + MultiColor.single(context.colorScheme.onSurface.withOpacity(0.38)); + break; + case ControlState.hovered: + backgroundColor = + MultiColor.single(context.colorScheme.primary.withOpacity(0.92)); + break; + case ControlState.tapped: + backgroundColor = + MultiColor.single(context.colorScheme.primary.withOpacity(0.92)); + break; + case null: + case ControlState.normal: + case ControlState.focused: + break; + } + + if (extra?.isInvalid ?? false) { + backgroundColor = + MultiColor.single(context.colorScheme.error); + } + + return FileSelectionButtonStyle( + title: context.textTheme.labelLarge, + subTitle: context.textTheme.labelSmall, + radius: (context.buttonTheme.shape is RoundedRectangleBorder) + ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius + : null, + padding: const EdgeInsets.symmetric(horizontal: 10), + foregroundColors: foregroundColor, + backgroundColors: backgroundColor, + ); + } @override final FileSelectionButtonStyle? Function( diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart index 5062d231..7de436bd 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart @@ -29,16 +29,42 @@ class SimpleIconButtonThemeResolver extends ThemeResolver - SimpleIconButtonStyle( - dimension: context.buttonTheme.height, - radius: (context.buttonTheme.shape is RoundedRectangleBorder) - ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius - : null, - padding: context.buttonTheme.padding, - foregroundColors: MultiColor.single(context.colorScheme.onPrimary), - backgroundColors: MultiColor.single(context.colorScheme.primary), - ); + }) { + MultiColor backgroundColor = MultiColor.single(context.colorScheme.primary); + MultiColor foregroundColor = + MultiColor.single(context.colorScheme.onPrimary); + + switch (extra) { + case ControlState.disabled: + backgroundColor = + MultiColor.single(context.colorScheme.onSurface.withOpacity(0.12)); + foregroundColor = + MultiColor.single(context.colorScheme.onSurface.withOpacity(0.38)); + break; + case ControlState.hovered: + backgroundColor = + MultiColor.single(context.colorScheme.primary.withOpacity(0.92)); + break; + case ControlState.tapped: + backgroundColor = + MultiColor.single(context.colorScheme.primary.withOpacity(0.92)); + break; + case null: + case ControlState.normal: + case ControlState.focused: + break; + } + + return SimpleIconButtonStyle( + dimension: context.buttonTheme.height, + radius: (context.buttonTheme.shape is RoundedRectangleBorder) + ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius + : null, + padding: EdgeInsets.zero, + foregroundColors: foregroundColor, + backgroundColors: backgroundColor, + ); + } @override final SimpleIconButtonStyle? Function( diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_theme_resolver.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_theme_resolver.dart index c0f21f63..8d679e22 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_theme_resolver.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_theme_resolver.dart @@ -58,7 +58,7 @@ class SymbolButtonThemeResolver extends ThemeResolver