packages/wyatt_ui_kit/example/lib/buttons/buttons.dart

@@ -14,11 +14,15 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import 'package:flutter/material.dart';
+import 'package: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)
+            style: Theme.of(context).textTheme.titleLarge,
-                .textTheme
-                .titleLarge,
           ),
           const Gap(20),
-          const FlatButton(
+          const OutlinedButton(
-            label: TextWrapper('text'),
+            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,
+            ),
           ),
         ],
       );

packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart

@@ -15,3 +15,4 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 export './flat_button/flat_button.dart';
+export './outlined_button/outlined_button.dart';

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 <https://www.gnu.org/licenses/>.
 
-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,71 +31,63 @@ class FlatButton extends FlatButtonComponent with $FlatButtonCWMixin {
     super.suffix,
     super.label,
     super.state,
-    super.radius,
+    super.style,
-    super.padding,
-    super.borderColors,
-    super.backgroundColor,
-    super.shadow,
     super.key,
   });
 
   @override
-  Widget build(BuildContext context) => ElevatedButton(
+  FlatButtonStyle? get style => super.style as FlatButtonStyle?;
-        onPressed: () {},
+
-        style: ElevatedButton.styleFrom(
+  @override
-          shape: RoundedRectangleBorder(
+  Widget build(BuildContext context) => Material(
-            borderRadius: BorderRadius.circular(radius ?? 0),
-          ),
-          padding: const EdgeInsets.all(0),
-        ),
         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)
+              colors: (style?.borderColors != null &&
-                    ? borderColors!
+                      style!.borderColors!.length >= 2)
+                  ? style!.borderColors!
                   : [
                       // TODO(hpcl): change this
                       Theme.of(context).cardColor,
                       Theme.of(context).cardColor
                     ],
             ),
-              width: 1,
-            ),
             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: 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),
-                  ),
+                    )
                   ],
-                const Text(
+                  Gap(style?.padding ?? 10),
-                  'OK',
-                  textAlign: TextAlign.center,
-                ),
                   suffix ?? const SizedBox.shrink(),
                 ],
               ),
             ),
           ),
+        ),
       );
 }

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);
+  FlatButton mainAxisSize(MainAxisSize? mainAxisSize) =>
-  @override
+      this(mainAxisSize: mainAxisSize);
-  FlatButton borderColors(List<Color>? borderColors) =>
-      this(borderColors: borderColors);
-  @override
-  FlatButton backgroundColor(Color? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
-  @override
-  FlatButton shadow(BoxShadow? shadow) => this(shadow: shadow);
   @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,
+    ButtonStyle? style,
-    double? padding,
+    MainAxisSize? mainAxisSize,
-    List<Color>? borderColors,
-    Color? backgroundColor,
-    BoxShadow? shadow,
     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,
       );
 }

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 <https://www.gnu.org/licenses/>.
+
+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(),
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+}

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);
+}

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