Wyatt-FOSS/wyatt-packages
Wyatt-FOSS/wyatt-packages
6
2
Fork 0
Code Issues 20 Pull Requests 3 Actions Packages Projects Releases Activity

feat(ui_kit): implement flat/outlined button

Browse Source
This commit is contained in:
Hugo Pointcheval 2023-02-13 12:20:04 +01:00
parent 07572aeca2
commit 60126fffc4
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
7 changed files with 244 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
View File

@ -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)
.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,
),
),
],
);

1
packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart
View File

@ -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';

52
packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart
View File

@ -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.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!
colors: (style?.borderColors != null &&
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(
'OK',
textAlign: TextAlign.center,
),
Gap(style?.padding ?? 10),
suffix ?? const SizedBox.shrink(),
],
),
),
),
),
);
}

25
packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart
View File

@ -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<Color>? 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<Color>? 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,
);
}

98
packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart Normal file
View File

@ -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(),
],
),
),
),
),
);
}

50
packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.g.dart Normal file
View File

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

4
packages/wyatt_ui_kit/pubspec.yaml
View File

@ -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