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

feat(ui_kit): use MultiColor in button style

Browse Source
This commit is contained in:
Hugo Pointcheval 2023-02-13 14:05:56 +01:00
parent 442baa6882
commit 9e1b76e07b
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
3 changed files with 107 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,10 @@ import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
const _color1 = Color(0xFF3C97FB);
const _color2 = Color(0xFF446DF4);
const _colors = [_color1, _color2];
const _disabled = Color(0xFF6B7280);
const _background = Color(0xFF16191D);
const _disabledBackground = Color(0xFF16191D + 0x66FFFFFF);
const _disabledColors = [Color(0xFF60656A), Color(0xFF383C40)];
class Buttons extends StatelessWidget {
const Buttons({super.key});
@ -37,7 +41,7 @@ class Buttons extends StatelessWidget {
const OutlinedButton(
label: TextWrapper('Voir notre savoir faire', gradient: _colors),
style: OutlinedButtonStyle(
borderColors: _colors,
borderColors: MultiColor(_colors),
stroke: 3,
),
prefix: Icon(
@ -57,7 +61,7 @@ class Buttons extends StatelessWidget {
context.textTheme.titleLarge?.copyWith(color: Colors.white),
),
style: const FlatButtonStyle(
borderColors: _colors,
backgroundColors: MultiColor(_colors),
),
prefix: const Icon(
Icons.arrow_forward_rounded,
@ -68,6 +72,86 @@ class Buttons extends StatelessWidget {
color: Colors.white,
),
),
const Gap(20),
ColoredBox(
color: _background,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
const Gap(20),
OutlinedButton(
label: TextWrapper(
'Démarrer mon projet',
style: context.textTheme.titleLarge
?.copyWith(color: _disabled),
),
style: const OutlinedButtonStyle(
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),
),
style: const FlatButtonStyle(
backgroundColors: MultiColor(_colors),
),
),
const Gap(20),
],
),
const Gap(20),
Column(
children: [
const Gap(20),
OutlinedButton(
label: TextWrapper(
'Aller voir nos réalisations',
style: context.textTheme.titleLarge
?.copyWith(color: Colors.white),
),
style: const OutlinedButtonStyle(
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),
),
style: const FlatButtonStyle(
backgroundColors: MultiColor(_colors),
),
suffix: const Icon(
Icons.arrow_forward_rounded,
color: Colors.white,
),
),
const Gap(20),
],
),
],
),
),
),
],
);
}

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

@ -40,20 +40,17 @@ class FlatButton extends FlatButtonComponent with $FlatButtonCWMixin {
@override
Widget build(BuildContext context) => Material(
color: const Color(0x00000000),
child: Ink(
decoration: BoxDecoration(
color: style?.backgroundColor ??
Theme.of(context).buttonTheme.colorScheme?.onPrimary,
gradient: LinearGradient(
colors: (style?.borderColors != null &&
style!.borderColors!.length >= 2)
? style!.borderColors!
: [
// TODO(hpcl): change this
Theme.of(context).cardColor,
Theme.of(context).cardColor
],
),
color: (style != null)
? style!.backgroundColors?.color
: Theme.of(context).buttonTheme.colorScheme?.onPrimary,
gradient: (style?.backgroundColors?.isGradient ?? false)
? LinearGradient(
colors: style!.backgroundColors!.colors,
)
: null,
boxShadow: [
if (style?.shadow != null) ...[style!.shadow!]
],

27
packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart
View File

@ -42,23 +42,20 @@ class OutlinedButton extends OutlinedButtonComponent
@override
Widget build(BuildContext context) => Material(
color: const Color(0x00000000),
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,
),
color: (style != null)
? style!.backgroundColors?.color
: Theme.of(context).buttonTheme.colorScheme?.onPrimary,
border: (style?.borderColors?.isGradient ?? false)
? GradientBoxBorder(
gradient: LinearGradient(
colors: style!.borderColors!.colors,
),
width: style?.stroke ?? 2,
)
: null,
boxShadow: [
if (style?.shadow != null) ...[style!.shadow!]
],