Skip to content

feat: Accordion type #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tilucasoli merged 2 commits into from
Oct 6, 2025
Merged

feat: Accordion type #6

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6408a2f
Refactor accordion style to use generics and improve API
tilucasoli Oct 6, 2025
a4638b2
Update naked_ui dependency to 0.2.0-beta.5
tilucasoli Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 43 additions & 40 deletions example/lib/api/accordion.0.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,66 +41,69 @@ class _AccordionExampleState extends State<AccordionExample> {
child: SizedBox(
width: 400,
child: FlexBox(
style: FlexBoxStyler().direction(Axis.vertical).spacing(24),
style: FlexBoxStyler()
.direction(Axis.vertical)
.spacing(24)
.mainAxisSize(MainAxisSize.min),
children: [
RemixAccordionGroup(
controller: controller,
children: [
RemixAccordion(
value: 'accordion1',
title: 'How do I update my account information?',
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
'Insert the accordion description here. It would look better as two lines of text.',
child: ColumnBox(
style: FlexBoxStyler().spacing(16),
children: [
RemixAccordion(
value: 'accordion1',
title: 'How do I update my account information?',
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
'Insert the accordion description here. It would look better as two lines of text.',
),
),
),
RemixAccordion(
value: 'accordion2',
title: 'What payment methods are accepted?',
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
'Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.'),
),
RemixAccordion(
value: 'accordion3',
title: 'How can I track my order?',
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
'You can track your order status in the "My Orders" section of your account.'),
),
],
RemixAccordion(
value: 'accordion2',
title: 'What payment methods are accepted?',
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
'Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.'),
),
RemixAccordion(
value: 'accordion3',
title: 'How can I track my order?',
leadingIcon: Icons.help_outline,
style: itemStyle,
child: const Text(
'You can track your order status in the "My Orders" section of your account.'),
),
],
),
),
],
),
),
);
}

RemixAccordionStyle get itemStyle {
return RemixAccordionStyle()
RemixAccordionStyle<String> get itemStyle {
return RemixAccordionStyle<String>()
.content(
BoxStyler()
.color(Colors.white)
.paddingX(16)
.paddingBottom(16)
.paddingTop(8),
BoxStyler().paddingX(16).paddingTop(8),
)
.onExpanded((bool isExpanded) {
return RemixAccordionStyle().content(
return RemixAccordionStyle<String>().content(
BoxStyler()
.maxHeight(isExpanded ? 1000 : 0)
.paddingY(isExpanded ? 16 : 0)
.color(Colors.purple)
.paddingBottom(isExpanded ? 16 : 0)
.animate(AnimationConfig.easeOut(200.ms)),
);
})
.wrapClipRRect(borderRadius: BorderRadius.circular(8))
.color(Colors.white)
.paddingAll(16)
.paddingX(16)
.paddingY(14)
.borderRounded(8)
.onHovered(
RemixAccordionStyle<String>().color(Colors.grey.shade100),
)
.decoration(
BoxDecorationMix(
color: Colors.white,
Expand Down
117 changes: 60 additions & 57 deletions lib/src/components/accordion/accordion_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
part of 'accordion.dart';

class RemixAccordionStyle
extends RemixFlexContainerStyle<RemixAccordionSpec, RemixAccordionStyle> {
class RemixAccordionStyle<T> extends RemixFlexContainerStyle<RemixAccordionSpec,
RemixAccordionStyle<T>> {
final Prop<StyleSpec<FlexBoxSpec>>? $trigger;
final Prop<StyleSpec<IconSpec>>? $leadingIcon;
final Prop<StyleSpec<TextSpec>>? $title;
Expand Down Expand Up @@ -43,56 +43,58 @@ class RemixAccordionStyle
modifier: modifier,
);

RemixAccordionStyle trigger(FlexBoxStyler value) {
return merge(RemixAccordionStyle(trigger: value));
RemixAccordionStyle<T> trigger(FlexBoxStyler value) {
return merge(RemixAccordionStyle<T>(trigger: value));
}

RemixAccordionStyle leadingIcon(IconStyler value) {
return merge(RemixAccordionStyle(leadingIcon: value));
RemixAccordionStyle<T> leadingIcon(IconStyler value) {
return merge(RemixAccordionStyle<T>(leadingIcon: value));
}

RemixAccordionStyle title(TextStyler value) {
return merge(RemixAccordionStyle(title: value));
RemixAccordionStyle<T> title(TextStyler value) {
return merge(RemixAccordionStyle<T>(title: value));
}

RemixAccordionStyle trailingIcon(IconStyler value) {
return merge(RemixAccordionStyle(trailingIcon: value));
RemixAccordionStyle<T> trailingIcon(IconStyler value) {
return merge(RemixAccordionStyle<T>(trailingIcon: value));
}

RemixAccordionStyle content(BoxStyler value) {
return merge(RemixAccordionStyle(content: value));
RemixAccordionStyle<T> content(BoxStyler value) {
return merge(RemixAccordionStyle<T>(content: value));
}

/// Sets container alignment
RemixAccordionStyle alignment(Alignment value) {
RemixAccordionStyle<T> alignment(Alignment value) {
return merge(
RemixAccordionStyle(trigger: FlexBoxStyler(alignment: value)),
RemixAccordionStyle<T>(trigger: FlexBoxStyler(alignment: value)),
);
}

/// Style when accordion is expanded
RemixAccordionStyle onExpanded(RemixAccordionStyle Function(bool) builder) {
RemixAccordionStyle<T> onExpanded(
RemixAccordionStyle<T> Function(bool) builder,
) {
return onBuilder((context) {
final isExpanded = NakedAccordionItemState.of(context).isExpanded;
final isExpanded = NakedAccordionItemState.of<T>(context).isExpanded;

return builder(isExpanded);
});
}

// /// Style when accordion is collapsed
// RemixAccordionStyle onCollapsed(RemixAccordionStyle value) {
// return variants([
// VariantStyle(
// ContextVariant('onCollapsed', (context) {
// return !NakedAccordionItemState.of(context).isExpanded;
// }),
// value,
// ),
// ]);
// }
/// Style when accordion is collapsed
RemixAccordionStyle<T> onCollapsed(RemixAccordionStyle<T> value) {
return variants([
VariantStyle(
ContextVariant('onCollapsed', (context) {
return !NakedAccordionItemState.of<T>(context).isExpanded;
}),
value,
),
]);
}

/// onCanCollapse
RemixAccordionStyle onCanCollapse(RemixAccordionStyle value) {
RemixAccordionStyle<T> onCanCollapse(RemixAccordionStyle<T> value) {
return variants([
VariantStyle(
ContextVariant('onCanCollapse', (context) {
Expand All @@ -104,7 +106,7 @@ class RemixAccordionStyle
}

/// onCanExpand
RemixAccordionStyle onCanExpand(RemixAccordionStyle value) {
RemixAccordionStyle<T> onCanExpand(RemixAccordionStyle<T> value) {
return variants([
VariantStyle(
ContextVariant('onCanExpand', (context) {
Expand All @@ -117,22 +119,22 @@ class RemixAccordionStyle

// RemixFlexContainerStyle mixin implementations
@override
RemixAccordionStyle padding(EdgeInsetsGeometryMix value) {
RemixAccordionStyle<T> padding(EdgeInsetsGeometryMix value) {
return merge(
RemixAccordionStyle(trigger: FlexBoxStyler(padding: value)),
RemixAccordionStyle<T>(trigger: FlexBoxStyler(padding: value)),
);
}

@override
RemixAccordionStyle color(Color value) {
return merge(RemixAccordionStyle(
RemixAccordionStyle<T> color(Color value) {
return merge(RemixAccordionStyle<T>(
trigger: FlexBoxStyler(decoration: BoxDecorationMix(color: value)),
));
}

@override
RemixAccordionStyle size(double width, double height) {
return merge(RemixAccordionStyle(
RemixAccordionStyle<T> size(double width, double height) {
return merge(RemixAccordionStyle<T>(
trigger: FlexBoxStyler(
constraints: BoxConstraintsMix(
minWidth: width,
Expand All @@ -145,52 +147,52 @@ class RemixAccordionStyle
}

@override
RemixAccordionStyle borderRadius(BorderRadiusGeometryMix radius) {
return merge(RemixAccordionStyle(
RemixAccordionStyle<T> borderRadius(BorderRadiusGeometryMix radius) {
return merge(RemixAccordionStyle<T>(
trigger:
FlexBoxStyler(decoration: BoxDecorationMix(borderRadius: radius)),
));
}

@override
RemixAccordionStyle constraints(BoxConstraintsMix value) {
RemixAccordionStyle<T> constraints(BoxConstraintsMix value) {
return merge(
RemixAccordionStyle(trigger: FlexBoxStyler(constraints: value)),
RemixAccordionStyle<T>(trigger: FlexBoxStyler(constraints: value)),
);
}

@override
RemixAccordionStyle decoration(DecorationMix value) {
RemixAccordionStyle<T> decoration(DecorationMix value) {
return merge(
RemixAccordionStyle(trigger: FlexBoxStyler(decoration: value)),
RemixAccordionStyle<T>(trigger: FlexBoxStyler(decoration: value)),
);
}

@override
RemixAccordionStyle margin(EdgeInsetsGeometryMix value) {
return merge(RemixAccordionStyle(trigger: FlexBoxStyler(margin: value)));
RemixAccordionStyle<T> margin(EdgeInsetsGeometryMix value) {
return merge(RemixAccordionStyle<T>(trigger: FlexBoxStyler(margin: value)));
}

@override
RemixAccordionStyle foregroundDecoration(DecorationMix value) {
return merge(RemixAccordionStyle(
RemixAccordionStyle<T> foregroundDecoration(DecorationMix value) {
return merge(RemixAccordionStyle<T>(
trigger: FlexBoxStyler(foregroundDecoration: value),
));
}

@override
RemixAccordionStyle transform(
RemixAccordionStyle<T> transform(
Matrix4 value, {
AlignmentGeometry alignment = Alignment.center,
}) {
return merge(RemixAccordionStyle(
return merge(RemixAccordionStyle<T>(
trigger: FlexBoxStyler(transform: value, transformAlignment: alignment),
));
}

@override
RemixAccordionStyle flex(FlexStyler value) {
return merge(RemixAccordionStyle(trigger: FlexBoxStyler()));
RemixAccordionStyle<T> flex(FlexStyler value) {
return merge(RemixAccordionStyle<T>(trigger: FlexBoxStyler()));
}

@override
Expand All @@ -209,10 +211,10 @@ class RemixAccordionStyle
}

@override
RemixAccordionStyle merge(RemixAccordionStyle? other) {
RemixAccordionStyle<T> merge(RemixAccordionStyle? other) {
if (other == null) return this;

return RemixAccordionStyle.create(
return RemixAccordionStyle<T>.create(
trigger: MixOps.merge($trigger, other.$trigger),
leadingIcon: MixOps.merge($leadingIcon, other.$leadingIcon),
title: MixOps.merge($title, other.$title),
Expand All @@ -225,18 +227,19 @@ class RemixAccordionStyle
}

@override
RemixAccordionStyle variants(List<VariantStyle<RemixAccordionSpec>> value) {
return merge(RemixAccordionStyle(variants: value));
RemixAccordionStyle<T> variants(
List<VariantStyle<RemixAccordionSpec>> value) {
return merge(RemixAccordionStyle<T>(variants: value));
}

@override
RemixAccordionStyle animate(AnimationConfig animation) {
return merge(RemixAccordionStyle(animation: animation));
RemixAccordionStyle<T> animate(AnimationConfig animation) {
return merge(RemixAccordionStyle<T>(animation: animation));
}

@override
RemixAccordionStyle wrap(WidgetModifierConfig value) {
return merge(RemixAccordionStyle(modifier: value));
RemixAccordionStyle<T> wrap(WidgetModifierConfig value) {
return merge(RemixAccordionStyle<T>(modifier: value));
}

@override
Expand Down
Loading