feat(ui_kit): add symbol button + enhance bloc control over state
This commit is contained in:
@@ -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),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user