feat(ui_kit): use MultiColor in button style
This commit is contained in:
@@ -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),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user