diff --git a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart index d9f6cede..2c679ec8 100644 --- a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart +++ b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart @@ -1,24 +1,28 @@ // 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:flutter/material.dart' hide OutlinedButton; 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 _colors = [_color1, _color2]; + class Buttons extends StatelessWidget { const Buttons({super.key}); @@ -27,13 +31,42 @@ class Buttons extends StatelessWidget { children: [ Text( 'Buttons', - style: Theme.of(context) - .textTheme - .titleLarge, + style: Theme.of(context).textTheme.titleLarge, ), const Gap(20), - const FlatButton( - label: TextWrapper('text'), + const OutlinedButton( + label: TextWrapper('Voir notre savoir faire', gradient: _colors), + style: OutlinedButtonStyle( + borderColors: _colors, + stroke: 3, + ), + prefix: Icon( + Icons.arrow_forward_rounded, + color: _color1, + ), + suffix: Icon( + Icons.arrow_forward_rounded, + color: _color2, + ), + ), + const Gap(20), + FlatButton( + label: TextWrapper( + 'Voir notre savoir faire', + style: + context.textTheme.titleLarge?.copyWith(color: Colors.white), + ), + style: const FlatButtonStyle( + borderColors: _colors, + ), + prefix: const Icon( + Icons.arrow_forward_rounded, + color: Colors.white, + ), + suffix: const Icon( + Icons.arrow_forward_rounded, + color: Colors.white, + ), ), ], ); diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart index 654c0f72..fe86edbe 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart @@ -15,3 +15,4 @@ // along with this program. If not, see . export './flat_button/flat_button.dart'; +export './outlined_button/outlined_button.dart'; diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart index 3a231884..075fd505 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart @@ -14,10 +14,10 @@ // 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:flutter/material.dart' hide ButtonStyle; +import 'package:gap/gap.dart'; import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart'; import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; -import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart'; import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart'; import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart'; import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart'; @@ -31,69 +31,61 @@ class FlatButton extends FlatButtonComponent with $FlatButtonCWMixin { super.suffix, super.label, super.state, - super.radius, - super.padding, - super.borderColors, - super.backgroundColor, - super.shadow, + super.style, super.key, }); @override - Widget build(BuildContext context) => ElevatedButton( - onPressed: () {}, - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(radius ?? 0), - ), - padding: const EdgeInsets.all(0), - ), + FlatButtonStyle? get style => super.style as FlatButtonStyle?; + + @override + Widget build(BuildContext context) => Material( child: Ink( decoration: BoxDecoration( - color: backgroundColor ?? + color: style?.backgroundColor ?? Theme.of(context).buttonTheme.colorScheme?.onPrimary, - border: GradientBoxBorder( - gradient: LinearGradient( - colors: (borderColors != null && borderColors!.length >= 2) - ? borderColors! - : [ - // TODO(hpcl): change this - Theme.of(context).cardColor, - Theme.of(context).cardColor - ], - ), - width: 1, + gradient: LinearGradient( + colors: (style?.borderColors != null && + style!.borderColors!.length >= 2) + ? style!.borderColors! + : [ + // TODO(hpcl): change this + Theme.of(context).cardColor, + Theme.of(context).cardColor + ], ), boxShadow: [ - if (shadow != null) ...[shadow!] + if (style?.shadow != null) ...[style!.shadow!] ], borderRadius: BorderRadius.all( - Radius.circular(radius ?? 0), + Radius.circular(style?.radius ?? 0), ), ), - child: Container( + child: ConstrainedBox( constraints: const BoxConstraints( minWidth: 88, minHeight: 36, ), // min sizes for Material buttons - alignment: Alignment.center, - child: Row( - children: [ - prefix ?? const SizedBox.shrink(), - if (label != null) ...[ - Text( - label!.text, - style: label!.style ?? context.textTheme.titleLarge, - ).toGradient( - LinearGradientHelper.fromNullableColors(label!.gradient), - ), + child: Padding( + padding: EdgeInsets.all(style?.padding ?? 0), + child: Row( + mainAxisSize: mainAxisSize ?? MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + prefix ?? const SizedBox.shrink(), + Gap(style?.padding ?? 10), + if (label != null) ...[ + Text( + label!.text, + style: label!.style ?? context.textTheme.titleLarge, + ).toGradient( + LinearGradientHelper.fromNullableColors(label!.gradient), + ) + ], + Gap(style?.padding ?? 10), + suffix ?? const SizedBox.shrink(), ], - const Text( - 'OK', - textAlign: TextAlign.center, - ), - suffix ?? const SizedBox.shrink(), - ], + ), ), ), ), diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart index d844da2f..d8a75583 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart @@ -18,17 +18,10 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy { @override FlatButton state(ControlState? state) => this(state: state); @override - FlatButton radius(double? radius) => this(radius: radius); + FlatButton style(ButtonStyle? style) => this(style: style); @override - FlatButton padding(double? padding) => this(padding: padding); - @override - FlatButton borderColors(List? borderColors) => - this(borderColors: borderColors); - @override - FlatButton backgroundColor(Color? backgroundColor) => - this(backgroundColor: backgroundColor); - @override - FlatButton shadow(BoxShadow? shadow) => this(shadow: shadow); + FlatButton mainAxisSize(MainAxisSize? mainAxisSize) => + this(mainAxisSize: mainAxisSize); @override FlatButton key(Key? key) => this(key: key); @override @@ -37,14 +30,16 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy { Widget? suffix, TextWrapper? label, ControlState? state, - double? radius, - double? padding, - List? borderColors, - Color? backgroundColor, - BoxShadow? shadow, + ButtonStyle? style, + MainAxisSize? mainAxisSize, Key? key, }) => FlatButton( + prefix: prefix ?? _value.prefix, + suffix: suffix ?? _value.suffix, + label: label ?? _value.label, + state: state ?? _value.state, + style: style ?? _value.style, key: key ?? _value.key, ); } diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart new file mode 100644 index 00000000..06d7e217 --- /dev/null +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart @@ -0,0 +1,98 @@ +// 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' hide ButtonStyle; +import 'package:gap/gap.dart'; +import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; +import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart'; +import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart'; +import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart'; +import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart'; + +part 'outlined_button.g.dart'; + +@ComponentCopyWithExtension() +class OutlinedButton extends OutlinedButtonComponent + with $OutlinedButtonCWMixin { + const OutlinedButton({ + super.prefix, + super.suffix, + super.label, + super.state, + super.style, + super.key, + }); + + @override + OutlinedButtonStyle? get style => super.style as OutlinedButtonStyle?; + + @override + Widget build(BuildContext context) => Material( + child: Ink( + decoration: BoxDecoration( + color: style?.backgroundColor ?? + Theme.of(context).buttonTheme.colorScheme?.onPrimary, + border: GradientBoxBorder( + gradient: LinearGradient( + colors: (style?.borderColors != null && + style!.borderColors!.length >= 2) + ? style!.borderColors! + : [ + // TODO(hpcl): change this + Theme.of(context).cardColor, + Theme.of(context).cardColor + ], + ), + width: style?.stroke ?? 2, + ), + boxShadow: [ + if (style?.shadow != null) ...[style!.shadow!] + ], + borderRadius: BorderRadius.all( + Radius.circular(style?.radius ?? 0), + ), + ), + child: ConstrainedBox( + constraints: const BoxConstraints( + minWidth: 88, + minHeight: 36, + ), // min sizes for Material buttons + child: Padding( + padding: EdgeInsets.all(style?.padding ?? 0), + child: Row( + mainAxisSize: mainAxisSize ?? MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + prefix ?? const SizedBox.shrink(), + Gap(style?.padding ?? 10), + if (label != null) ...[ + Text( + label!.text, + style: label!.style ?? context.textTheme.titleLarge, + ).toGradient( + LinearGradientHelper.fromNullableColors(label!.gradient), + ) + ], + Gap(style?.padding ?? 10), + suffix ?? const SizedBox.shrink(), + ], + ), + ), + ), + ), + ); +} diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.g.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.g.dart new file mode 100644 index 00000000..6529baa6 --- /dev/null +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.g.dart @@ -0,0 +1,50 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND + +part of 'outlined_button.dart'; + +// ************************************************************************** +// ComponentCopyWithGenerator +// ************************************************************************** + +class $OutlinedButtonCWProxyImpl implements $OutlinedButtonComponentCWProxy { + const $OutlinedButtonCWProxyImpl(this._value); + final OutlinedButton _value; + @override + OutlinedButton prefix(Widget? prefix) => this(prefix: prefix); + @override + OutlinedButton suffix(Widget? suffix) => this(suffix: suffix); + @override + OutlinedButton label(TextWrapper? label) => this(label: label); + @override + OutlinedButton state(ControlState? state) => this(state: state); + @override + OutlinedButton style(ButtonStyle? style) => this(style: style); + @override + OutlinedButton mainAxisSize(MainAxisSize? mainAxisSize) => + this(mainAxisSize: mainAxisSize); + @override + OutlinedButton key(Key? key) => this(key: key); + @override + OutlinedButton call({ + Widget? prefix, + Widget? suffix, + TextWrapper? label, + ControlState? state, + ButtonStyle? style, + MainAxisSize? mainAxisSize, + Key? key, + }) => + OutlinedButton( + prefix: prefix ?? _value.prefix, + suffix: suffix ?? _value.suffix, + label: label ?? _value.label, + state: state ?? _value.state, + style: style ?? _value.style, + key: key ?? _value.key, + ); +} + +mixin $OutlinedButtonCWMixin on Component { + $OutlinedButtonComponentCWProxy get copyWith => + $OutlinedButtonCWProxyImpl(this as OutlinedButton); +} diff --git a/packages/wyatt_ui_kit/pubspec.yaml b/packages/wyatt_ui_kit/pubspec.yaml index 083d7fa6..58388d01 100644 --- a/packages/wyatt_ui_kit/pubspec.yaml +++ b/packages/wyatt_ui_kit/pubspec.yaml @@ -12,6 +12,10 @@ dependencies: flutter: { sdk: flutter } gap: ^2.0.1 flutter_animate: ^3.0.0 + wyatt_bloc_helper: + git: + url: ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-packages.git + path: packages/wyatt_bloc_helper wyatt_component_copy_with_extension: git: url: ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-packages.git