feat(ui_kit): use MultiColor in button style

This commit is contained in:
2023-02-14 11:55:34 +01:00
parent 442baa6882
commit 9e1b76e07b
3 changed files with 107 additions and 29 deletions
@@ -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),
],
),
],
),
),
),
],
);
}