feat(ui_kit): add symbol button + enhance bloc control over state

This commit is contained in:
2023-02-14 11:55:34 +01:00
parent aea71fa32c
commit 168d840b87
14 changed files with 721 additions and 59 deletions
@@ -24,11 +24,12 @@ const _color2 = Color(0xFF446DF4);
const _color3 = Color.fromARGB(255, 26, 132, 247);
const _color4 = Color.fromARGB(255, 19, 68, 228);
const _colors = [_color1, _color2];
const _colorsDarken = [_color2, _color3];
const _colorsDarken = [_color3, _color4];
const _disabled = Color(0xFF6B7280);
const _background = Color(0xFF16191D);
const _disabledBackground = Color(0xFF16191D + 0x66FFFFFF);
const _disabledColors = [Color(0xFF60656A), Color(0xFF383C40)];
const _selectedColors = [Color(0xFF50CE99), Color(0xFF339572)];
class Buttons extends StatelessWidget {
const Buttons({super.key});
@@ -41,30 +42,30 @@ class Buttons extends StatelessWidget {
style: Theme.of(context).textTheme.titleLarge,
),
const Gap(20),
const FlatButton(
label: TextWrapper('Voir notre savoir faire'),
normalStyle: FlatButtonStyle(
FlatButton(
label: const TextWrapper('Voir notre savoir faire'),
normalStyle: const FlatButtonStyle(
foregroundColors: MultiColor(_colors),
backgroundColors: MultiColor.single(Colors.transparent),
borderColors: MultiColor(_colors),
stroke: 3,
),
hoveredStyle: FlatButtonStyle(
hoveredStyle: const FlatButtonStyle(
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor(_colors),
borderColors: MultiColor(_colors),
stroke: 3,
),
tappedStyle: FlatButtonStyle(
tappedStyle: const FlatButtonStyle(
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor(_colorsDarken),
borderColors: MultiColor(_colorsDarken),
stroke: 3,
),
prefix: Icon(
prefix: const Icon(
Icons.arrow_forward_rounded,
),
suffix: Icon(
suffix: const Icon(
Icons.arrow_forward_rounded,
),
),
@@ -169,7 +170,7 @@ class Buttons extends StatelessWidget {
),
const Gap(20),
FlatButton(
onPressed: () => print('pressed'),
onPressed: (state) => print('pressed, from $state'),
label: TextWrapper(
'Démarrer mon projet',
style:
@@ -191,6 +192,72 @@ class Buttons extends StatelessWidget {
backgroundColors: MultiColor.single(Colors.red),
),
),
const Gap(20),
ColoredBox(
color: _background,
child: Center(
child: Column(
children: [
const Gap(20),
SymbolButton(
icon: const Icon(
Icons.android,
size: 25,
),
label: const TextWrapper('Texte'),
normalStyle: const SymbolButtonStyle(
borderColors: MultiColor(_disabledColors),
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor.single(_disabledBackground),
stroke: 1,
),
hoveredStyle: const SymbolButtonStyle(
borderColors: MultiColor(_disabledColors),
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor.single(_background),
stroke: 1,
),
selectedStyle: const SymbolButtonStyle(
borderColors: MultiColor(_selectedColors),
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor.single(_disabledBackground),
stroke: 1,
),
)
..bloc.onClickUpIn()
..bloc.freeze(),
const Gap(20),
SymbolButton(
icon: const Icon(
Icons.android,
size: 25,
),
label: const TextWrapper('Texte'),
normalStyle: const SymbolButtonStyle(
borderColors: MultiColor(_disabledColors),
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor.single(_disabledBackground),
stroke: 1,
),
hoveredStyle: const SymbolButtonStyle(
borderColors: MultiColor(_disabledColors),
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor.single(_background),
stroke: 1,
),
selectedStyle: const SymbolButtonStyle(
borderColors: MultiColor(_selectedColors),
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor.single(_disabledBackground),
stroke: 1,
),
)..bloc.freeze(),
const Gap(20),
],
),
),
),
const Gap(20),
],
);
}