feat(ui_kit): finalize material ready buttons
This commit is contained in:
@@ -16,28 +16,17 @@
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
|
||||
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
|
||||
|
||||
const _color1 = Color(0xFF3C97FB);
|
||||
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 = [_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)];
|
||||
const _invalidColor = Color(0xFFFB5E3C);
|
||||
import 'package:wyatt_ui_kit_example/buttons/file_selection_button/file_selection_buttons.dart';
|
||||
import 'package:wyatt_ui_kit_example/buttons/flat_button/flat_buttons.dart';
|
||||
import 'package:wyatt_ui_kit_example/buttons/simple_icon_button/simple_icon_buttons.dart';
|
||||
import 'package:wyatt_ui_kit_example/buttons/symbol_button/symbol_buttons.dart';
|
||||
|
||||
class Buttons extends StatelessWidget {
|
||||
const Buttons({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => ListView(
|
||||
cacheExtent: 2000,
|
||||
cacheExtent: 1000,
|
||||
children: [
|
||||
const Gap(20),
|
||||
Align(
|
||||
@@ -47,337 +36,19 @@ class Buttons extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: 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: const FlatButtonStyle(
|
||||
foregroundColors: MultiColor.single(Colors.white),
|
||||
backgroundColors: MultiColor(_colors),
|
||||
borderColors: MultiColor(_colors),
|
||||
stroke: 3,
|
||||
),
|
||||
tappedStyle: const FlatButtonStyle(
|
||||
foregroundColors: MultiColor.single(Colors.white),
|
||||
backgroundColors: MultiColor(_colorsDarken),
|
||||
borderColors: MultiColor(_colorsDarken),
|
||||
stroke: 3,
|
||||
),
|
||||
prefix: const Icon(
|
||||
Icons.arrow_forward_rounded,
|
||||
),
|
||||
suffix: const Icon(
|
||||
Icons.arrow_forward_rounded,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
FlatButton(
|
||||
label: TextWrapper(
|
||||
'Voir notre savoir faire',
|
||||
style:
|
||||
context.textTheme.titleLarge?.copyWith(color: Colors.white),
|
||||
),
|
||||
normalStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor(_colors),
|
||||
),
|
||||
prefix: const Icon(
|
||||
Icons.arrow_forward_rounded,
|
||||
color: Colors.white,
|
||||
),
|
||||
suffix: const Icon(
|
||||
Icons.arrow_forward_rounded,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
ColoredBox(
|
||||
color: _background,
|
||||
child: Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
const Gap(20),
|
||||
FlatButton(
|
||||
label: TextWrapper(
|
||||
'Démarrer mon projet',
|
||||
style: context.textTheme.titleLarge
|
||||
?.copyWith(color: _disabled),
|
||||
),
|
||||
normalStyle: const FlatButtonStyle(
|
||||
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),
|
||||
),
|
||||
normalStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor(_colors),
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
],
|
||||
),
|
||||
const Gap(20),
|
||||
Column(
|
||||
children: [
|
||||
const Gap(20),
|
||||
FlatButton(
|
||||
label: TextWrapper(
|
||||
'Aller voir nos réalisations',
|
||||
style: context.textTheme.titleLarge
|
||||
?.copyWith(color: Colors.white),
|
||||
),
|
||||
normalStyle: const FlatButtonStyle(
|
||||
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),
|
||||
),
|
||||
normalStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor(_colors),
|
||||
),
|
||||
suffix: const Icon(
|
||||
Icons.arrow_forward_rounded,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
FlatButton(
|
||||
label: TextWrapper(
|
||||
'Démarrer mon projet',
|
||||
style:
|
||||
context.textTheme.titleLarge?.copyWith(color: Colors.white),
|
||||
),
|
||||
disabledStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor.single(Colors.blue),
|
||||
),
|
||||
normalStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor(_colors),
|
||||
),
|
||||
hoveredStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor.single(Colors.green),
|
||||
),
|
||||
focusedStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor.single(Colors.yellow),
|
||||
),
|
||||
tappedStyle: const FlatButtonStyle(
|
||||
backgroundColors: MultiColor.single(Colors.red),
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
ColoredBox(
|
||||
color: _background,
|
||||
child: Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
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),
|
||||
Row(
|
||||
children: [
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
normalStyle: const SimpleIconButtonStyle(
|
||||
backgroundColors: MultiColor.single(_disabled),
|
||||
),
|
||||
hoveredStyle: SimpleIconButtonStyle(
|
||||
backgroundColors:
|
||||
MultiColor.single(_disabledColors.last),
|
||||
),
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.sunny,
|
||||
size: 17,
|
||||
),
|
||||
normalStyle: const SimpleIconButtonStyle(
|
||||
backgroundColors: MultiColor.single(_disabled),
|
||||
),
|
||||
hoveredStyle: SimpleIconButtonStyle(
|
||||
backgroundColors:
|
||||
MultiColor.single(_disabledColors.last),
|
||||
),
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.wechat,
|
||||
size: 17,
|
||||
),
|
||||
normalStyle: const SimpleIconButtonStyle(
|
||||
backgroundColors: MultiColor.single(_disabled),
|
||||
),
|
||||
hoveredStyle: SimpleIconButtonStyle(
|
||||
backgroundColors:
|
||||
MultiColor.single(_disabledColors.last),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
const Gap(20),
|
||||
Row(
|
||||
children: [
|
||||
SymbolButton(
|
||||
icon: const FlutterLogo(
|
||||
size: 50,
|
||||
),
|
||||
normalStyle: const SymbolButtonStyle(
|
||||
dimension: 73,
|
||||
backgroundColors: MultiColor.single(Colors.white),
|
||||
),
|
||||
hoveredStyle: SymbolButtonStyle(
|
||||
dimension: 73,
|
||||
backgroundColors: MultiColor.single(Colors.grey[300]),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: const DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: _disabled,
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(5),
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(8),
|
||||
child: Icon(
|
||||
Icons.file_upload_outlined,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
title: TextWrapper(
|
||||
'Ajouter un fichier',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.titleLarge
|
||||
?.copyWith(color: _disabled),
|
||||
),
|
||||
subTitle: TextWrapper.text('Taille max: 20 Mo'),
|
||||
normalStyle: const FileSelectionButtonStyle(
|
||||
backgroundColors: MultiColor.single(_disabledBackground),
|
||||
foregroundColors: MultiColor.single(_disabled),
|
||||
borderColors: MultiColor.single(_disabled),
|
||||
),
|
||||
hoveredStyle: const FileSelectionButtonStyle(
|
||||
backgroundColors: MultiColor.single(_disabledBackground),
|
||||
foregroundColors: MultiColor.single(_disabled),
|
||||
borderColors: MultiColor.single(Colors.white),
|
||||
),
|
||||
invalidStyle: const FileSelectionButtonStyle(
|
||||
backgroundColors: MultiColor.single(_disabledBackground),
|
||||
foregroundColors: MultiColor.single(_invalidColor),
|
||||
borderColors: MultiColor.single(_invalidColor),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: const [
|
||||
FlatButtons(),
|
||||
Gap(20),
|
||||
SymbolButtons(),
|
||||
Gap(20),
|
||||
SimpleIconButtons(),
|
||||
],
|
||||
),
|
||||
const Gap(20),
|
||||
const Align(child: FileSelectionButtons()),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
// Copyright (C) 2023 WYATT GROUP
|
||||
// Please see the AUTHORS file for details.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
|
||||
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/constants.dart';
|
||||
|
||||
class FileSelectionButtons extends StatelessWidget {
|
||||
const FileSelectionButtons({super.key});
|
||||
|
||||
Widget _leading() => const DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: Constants.grey3,
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(5),
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(8),
|
||||
child: Icon(
|
||||
Icons.file_upload_outlined,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'FileSelection Buttons',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Ajouter un fichier',
|
||||
),
|
||||
subTitle: const TextWrapper('Taille max: 20 Mo'),
|
||||
),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Enabled',
|
||||
),
|
||||
subTitle: const TextWrapper('Subtitle'),
|
||||
)
|
||||
..bloc.enable()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Disabled',
|
||||
),
|
||||
subTitle: const TextWrapper('Subtitle'),
|
||||
)
|
||||
..bloc.disable()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Hovered',
|
||||
),
|
||||
subTitle: const TextWrapper('Subtitle'),
|
||||
)
|
||||
..bloc.onMouseEnter()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Focused',
|
||||
),
|
||||
subTitle: const TextWrapper('Subtitle'),
|
||||
)
|
||||
..bloc.onFocus()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Tapped',
|
||||
),
|
||||
subTitle: const TextWrapper('Subtitle'),
|
||||
)
|
||||
..bloc.onClickDown()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
FileSelectionButton(
|
||||
leading: _leading(),
|
||||
title: const TextWrapper(
|
||||
'Invalid',
|
||||
),
|
||||
subTitle: const TextWrapper('Subtitle'),
|
||||
)
|
||||
..bloc.invalidate()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
// Copyright (C) 2023 WYATT GROUP
|
||||
// Please see the AUTHORS file for details.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
|
||||
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
|
||||
|
||||
class FlatButtons extends StatelessWidget {
|
||||
const FlatButtons({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Column(
|
||||
children: [
|
||||
Text(
|
||||
'Flat Buttons',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: FlatButton(
|
||||
label: const TextWrapper('Voir notre savoir faire'),
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: FlatButton(
|
||||
label: const TextWrapper('Enabled'),
|
||||
)
|
||||
..bloc.enable()
|
||||
..bloc.freeze(),
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: FlatButton(
|
||||
label: const TextWrapper('Disabled'),
|
||||
)
|
||||
..bloc.disable()
|
||||
..bloc.freeze(),
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: FlatButton(
|
||||
label: const TextWrapper('Hovered'),
|
||||
)
|
||||
..bloc.onMouseEnter()
|
||||
..bloc.freeze(),
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: FlatButton(
|
||||
label: const TextWrapper('Focused'),
|
||||
)
|
||||
..bloc.onFocus()
|
||||
..bloc.freeze(),
|
||||
),
|
||||
const Gap(20),
|
||||
Center(
|
||||
child: FlatButton(
|
||||
label: const TextWrapper('Tapped'),
|
||||
)
|
||||
..bloc.onClickDown()
|
||||
..bloc.freeze(),
|
||||
),
|
||||
const Gap(20),
|
||||
],
|
||||
);
|
||||
}
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
// Copyright (C) 2023 WYATT GROUP
|
||||
// Please see the AUTHORS file for details.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
|
||||
|
||||
class SimpleIconButtons extends StatelessWidget {
|
||||
const SimpleIconButtons({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'SimpleIcon Buttons',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const Gap(20),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
Text(
|
||||
'Enabled',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
)
|
||||
..bloc.enable()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
Text(
|
||||
'Disabled',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
)
|
||||
..bloc.disable()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
Text(
|
||||
'Hovered',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
)
|
||||
..bloc.onMouseEnter()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
Text(
|
||||
'Focused',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
)
|
||||
..bloc.onFocus()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
Text(
|
||||
'Tapped',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
const Gap(10),
|
||||
SimpleIconButton(
|
||||
icon: const Icon(
|
||||
Icons.storm_outlined,
|
||||
size: 17,
|
||||
),
|
||||
)
|
||||
..bloc.onClickDown()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
// Copyright (C) 2023 WYATT GROUP
|
||||
// Please see the AUTHORS file for details.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
|
||||
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
|
||||
import 'package:wyatt_ui_kit_example/theme/constants.dart';
|
||||
|
||||
class SymbolButtons extends StatelessWidget {
|
||||
const SymbolButtons({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Symbol Buttons',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Text'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Enabled'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
)
|
||||
..bloc.enable()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Disabled'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
)
|
||||
..bloc.disable()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Hovered'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
)
|
||||
..bloc.onMouseEnter()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Focused'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
)
|
||||
..bloc.onFocus()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Tapped'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
)
|
||||
..bloc.onClickDown()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
SymbolButton(
|
||||
label: const TextWrapper('Selected'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
)
|
||||
..bloc.select()
|
||||
..bloc.freeze(),
|
||||
const Gap(20),
|
||||
DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Constants.red1),
|
||||
),
|
||||
child: SymbolButton(
|
||||
label: const TextWrapper('Trigger zone'),
|
||||
icon: const Icon(
|
||||
Icons.android,
|
||||
size: 25,
|
||||
color: Constants.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Gap(20),
|
||||
],
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user