feat(ui_kit): make skillcard header icon customizable

This commit is contained in:
Hugo Pointcheval 2023-04-07 17:14:22 +02:00 committed by Hugo Pointcheval
parent 8d12f84fcc
commit 6f09eeca0e
5 changed files with 43 additions and 44 deletions

View File

@ -36,7 +36,18 @@ class SkillCards extends StatelessWidget {
children: [
SkillCard(
gradient: const [Colors.red, Colors.orange],
icon: Icons.ac_unit_sharp,
icon: Container(
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.04),
),
child: const GradientIcon(
Icons.ac_unit_sharp,
gradient:
LinearGradient(colors: [Colors.red, Colors.orange]),
),
),
title: 'Lorem Ipsum'.wrap(),
description: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
'Qui ipsum id ea ea nulla labore aute ullamco aute '
@ -54,7 +65,19 @@ class SkillCards extends StatelessWidget {
const Gap(20),
SkillCard(
gradient: const [Colors.blue, Colors.green],
icon: Icons.ac_unit_sharp,
icon: Container(
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.04),
),
child: const GradientIcon(
Icons.ac_unit_sharp,
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
),
),
),
title: 'Lorem Ipsum'.wrap(),
description: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
'Qui ipsum id ea ea nulla labore aute ullamco aute '

View File

@ -22,8 +22,8 @@ EXTERNAL SOURCES:
SPEC CHECKSUMS:
FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
path_provider_foundation: 37748e03f12783f9de2cb2c4eadfaa25fe6d4852
shared_preferences_foundation: 297b3ebca31b34ec92be11acd7fb0ba932c822ca
path_provider_foundation: c68054786f1b4f3343858c1e1d0caaded73f0be9
shared_preferences_foundation: 986fc17f3d3251412d18b0265f9c64113a8c2472
PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7

View File

@ -62,7 +62,6 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
secondaryBackgroundColors: secondaryBackgroundColors,
icon: icon,
title: title,
gradient: gradient,
),
const Gap(25),
if (description != null) ...[

View File

@ -10,7 +10,7 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
const $SkillCardCWProxyImpl(this._value);
final SkillCard _value;
@override
SkillCard icon(IconData? icon) => this(icon: icon);
SkillCard icon(Widget? icon) => this(icon: icon);
@override
SkillCard gradient(List<Color>? gradient) => this(gradient: gradient);
@override
@ -48,7 +48,7 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
SkillCard key(Key? key) => this(key: key);
@override
SkillCard call({
IconData? icon,
Widget? icon,
List<Color>? gradient,
TextWrapper? title,
TextWrapper? description,

View File

@ -18,61 +18,38 @@ import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
import 'package:wyatt_ui_kit/src/domain/card_theme_extension.dart';
class SkillCardHeader extends StatelessWidget {
const SkillCardHeader({
super.key,
this.icon,
this.title,
this.gradient,
this.secondaryBackgroundColors,
});
final IconData? icon;
final Widget? icon;
final TextWrapper? title;
final List<Color>? gradient;
final Color? secondaryBackgroundColors;
@override
Widget build(BuildContext context) => Column(
children: [
if (icon != null) ...[
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: secondaryBackgroundColors ??
Theme.of(context)
.extension<CardThemeExtension>()
?.secondaryBackgroundColor,
),
child: gradient != null
? GradientIcon(
icon,
size: 45,
gradient: LinearGradient(colors: gradient!),
)
: Icon(
icon,
size: 45,
),
),
icon!,
const Gap(25),
Column(
children: [
if (title != null) ...[
CardText(
title!,
textType: TextType.title,
style: title!.style,
gradientColors: title!.gradientColors,
),
],
],
)
],
Column(
children: [
if (title != null) ...[
CardText(
title!,
textType: TextType.title,
style: title!.style,
gradientColors: title!.gradientColors,
),
],
],
)
],
);
}