Wyatt-FOSS/wyatt-packages
6
2
Fork 0
Code Issues 20 Pull Requests 4 Actions Packages Projects Releases Activity

refactor(ui_kit): use tapped state and merged styles

Browse Source
This commit is contained in:
hugo
2023-02-14 11:55:34 +01:00
parent 61e28ce5e7
commit b6f25dd5b5
11 changed files with 430 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
+52 -13
View File
@@ -14,14 +14,17 @@
// 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' hide OutlinedButton;
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 = [_color2, _color3];
const _disabled = Color(0xFF6B7280);
const _background = Color(0xFF16191D);
const _disabledBackground = Color(0xFF16191D + 0x66FFFFFF);
@@ -38,19 +41,31 @@ class Buttons extends StatelessWidget {
style: Theme.of(context).textTheme.titleLarge,
),
const Gap(20),
const OutlinedButton(
label: TextWrapper('Voir notre savoir faire', gradient: _colors),
style: OutlinedButtonStyle(
const FlatButton(
label: TextWrapper('Voir notre savoir faire'),
normalStyle: FlatButtonStyle(
foregroundColors: MultiColor(_colors),
backgroundColors: MultiColor.single(Colors.transparent),
borderColors: MultiColor(_colors),
stroke: 3,
),
hoveredStyle: FlatButtonStyle(
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor(_colors),
borderColors: MultiColor(_colors),
stroke: 3,
),
tappedStyle: FlatButtonStyle(
foregroundColors: MultiColor.single(Colors.white),
backgroundColors: MultiColor(_colorsDarken),
borderColors: MultiColor(_colorsDarken),
stroke: 3,
),
prefix: Icon(
Icons.arrow_forward_rounded,
color: _color1,
),
suffix: Icon(
Icons.arrow_forward_rounded,
color: _color2,
),
),
const Gap(20),
@@ -60,7 +75,7 @@ class Buttons extends StatelessWidget {
style:
context.textTheme.titleLarge?.copyWith(color: Colors.white),
),
style: const FlatButtonStyle(
normalStyle: const FlatButtonStyle(
backgroundColors: MultiColor(_colors),
),
prefix: const Icon(
@@ -82,13 +97,13 @@ class Buttons extends StatelessWidget {
Column(
children: [
const Gap(20),
OutlinedButton(
FlatButton(
label: TextWrapper(
'Démarrer mon projet',
style: context.textTheme.titleLarge
?.copyWith(color: _disabled),
),
style: const OutlinedButtonStyle(
normalStyle: const FlatButtonStyle(
borderColors: MultiColor(_disabledColors),
backgroundColors:
MultiColor.single(_disabledBackground),
@@ -102,7 +117,7 @@ class Buttons extends StatelessWidget {
style: context.textTheme.titleLarge
?.copyWith(color: Colors.white),
),
style: const FlatButtonStyle(
normalStyle: const FlatButtonStyle(
backgroundColors: MultiColor(_colors),
),
),
@@ -113,13 +128,13 @@ class Buttons extends StatelessWidget {
Column(
children: [
const Gap(20),
OutlinedButton(
FlatButton(
label: TextWrapper(
'Aller voir nos réalisations',
style: context.textTheme.titleLarge
?.copyWith(color: Colors.white),
),
style: const OutlinedButtonStyle(
normalStyle: const FlatButtonStyle(
borderColors: MultiColor(_colors),
backgroundColors:
MultiColor.single(_disabledBackground),
@@ -137,7 +152,7 @@ class Buttons extends StatelessWidget {
style: context.textTheme.titleLarge
?.copyWith(color: Colors.white),
),
style: const FlatButtonStyle(
normalStyle: const FlatButtonStyle(
backgroundColors: MultiColor(_colors),
),
suffix: const Icon(
@@ -152,6 +167,30 @@ class Buttons extends StatelessWidget {
),
),
),
const Gap(20),
FlatButton(
onPressed: () => print('pressed'),
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),
),
),
],
);
}