-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Fix PR issues * Adjust separator default values * Tweak separator even more * Tidy up separator implementation * Refactor widget styles * Add golden tests * Further refine golden tests * Commit from GitHub Actions (Forui Presubmit) * Add badge * Fix diagnostic_describe_all_properties lint * Tidy up badge * Commit from GitHub Actions (Forui Presubmit) * Fix PR issues * Fix PR issues * Commit from GitHub Actions (Forui Presubmit) --------- Co-authored-by: Pante <[email protected]>
- Loading branch information
Showing
34 changed files
with
509 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/widgets.dart'; | ||
|
|
||
| import 'package:meta/meta.dart'; | ||
|
|
||
| import 'package:forui/forui.dart'; | ||
|
|
||
| part 'badge_content.dart'; | ||
| part 'badge_styles.dart'; | ||
|
|
||
| /// A badge, or a component that looks like a badge. | ||
| class FBadge extends StatelessWidget { | ||
|
|
||
| /// The design. | ||
| final FBadgeDesign design; | ||
|
|
||
| /// A callback for when the badge is pressed. | ||
| final void Function(BuildContext)? onPressed; | ||
|
|
||
| /// A callback for when the badge is long pressed. | ||
| final void Function(BuildContext)? onLongPressed; | ||
|
|
||
| /// The builder. | ||
| final Widget Function(BuildContext, FBadgeStyle) builder; | ||
|
|
||
| /// Creates a [FBadge]. | ||
| FBadge({required String label, required this.design, this.onPressed, this.onLongPressed, super.key}): | ||
| builder = ((context, style) => FBadgeContent(label: label, style: style)); | ||
|
|
||
| /// Creates a [FBadge]. | ||
| const FBadge.raw({required this.design, required this.builder, this.onPressed, this.onLongPressed, super.key}); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final style = switch (design) { | ||
| final FBadgeStyle style => style, | ||
| FBadgeVariant.primary => context.theme.badgeStyles.primary, | ||
| FBadgeVariant.secondary => context.theme.badgeStyles.secondary, | ||
| FBadgeVariant.outline => context.theme.badgeStyles.outline, | ||
| FBadgeVariant.destructive => context.theme.badgeStyles.destructive, | ||
| }; | ||
|
|
||
| final chip = IntrinsicWidth( | ||
| child: IntrinsicHeight( | ||
| child: DecoratedBox( | ||
| decoration: BoxDecoration( | ||
| border: Border.all( | ||
| color: style.border, | ||
| width: style.borderWidth, | ||
| ), | ||
| borderRadius: style.borderRadius, | ||
| color: style.background, | ||
| ), | ||
| child: builder(context, style), | ||
| ), | ||
| ), | ||
| ); | ||
|
|
||
| if (onPressed == null && onLongPressed == null) { | ||
| return chip; | ||
| } | ||
|
|
||
| // TODO: Wrap in FTappable when it's ready. | ||
| return chip; | ||
| } | ||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty<FBadgeDesign>('design', design)) | ||
| ..add(DiagnosticsProperty<void Function(BuildContext)?>('onPressed', onPressed, defaultValue: null)) | ||
| ..add(DiagnosticsProperty<void Function(BuildContext)?>('onLongPressed', onLongPressed, defaultValue: null)) | ||
| ..add(DiagnosticsProperty<Widget Function(BuildContext, FBadgeStyle)>('builder', builder, defaultValue: null)); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /// The badge design. Either a pre-defined [FBadgeVariant], or a custom [FBadgeStyle]. | ||
| sealed class FBadgeDesign {} | ||
|
|
||
| /// A pre-defined badge variant. | ||
| enum FBadgeVariant implements FBadgeDesign { | ||
| /// A primary-styled badge. | ||
| primary, | ||
| /// A secondary-styled badge. | ||
| secondary, | ||
| /// An outlined badge. | ||
| outline, | ||
| /// A destructive badge. | ||
| destructive, | ||
| } | ||
|
|
||
| /// A [FBadge]'s style. | ||
| final class FBadgeStyle with Diagnosticable implements FBadgeDesign { | ||
|
|
||
| /// The background color. | ||
| final Color background; | ||
|
|
||
| /// The border color. | ||
| final Color border; | ||
|
|
||
| /// The border radius. | ||
| final BorderRadius borderRadius; | ||
|
|
||
| /// The border width (thickness). Defaults to 1. | ||
| /// | ||
| /// ## Contract: | ||
| /// Throws an [AssertionError] if: | ||
| /// * `borderWidth` <= 0.0 | ||
| /// * `borderWidth` is Nan | ||
| final double borderWidth; | ||
|
|
||
| /// The button content's style. | ||
| final FBadgeContentStyle content; | ||
|
|
||
| /// Creates a [FBadgeStyle]. | ||
| FBadgeStyle({ | ||
| required this.background, | ||
| required this.border, | ||
| required this.borderRadius, | ||
| required this.content, | ||
| this.borderWidth = 1, | ||
| }): assert(0 < borderWidth, 'The borderWidth is $borderWidth, but it should be in the range "0 < borderWidth".'); | ||
|
|
||
| /// Creates a [FBadgeStyle] that inherits its properties from [style]. | ||
| FBadgeStyle.inherit({ | ||
| required FStyle style, | ||
| required this.background, | ||
| required this.border, | ||
| required this.content, | ||
| }): borderRadius = BorderRadius.circular(100), borderWidth = style.borderWidth; | ||
|
|
||
| /// Creates a copy of this [FBadgeStyle] with the given properties replaced. | ||
| FBadgeStyle copyWith({ | ||
| Color? background, | ||
| Color? border, | ||
| BorderRadius? borderRadius, | ||
| double? borderWidth, | ||
| FBadgeContentStyle? content, | ||
| }) => FBadgeStyle( | ||
| background: background ?? this.background, | ||
| border: border ?? this.border, | ||
| borderRadius: borderRadius ?? this.borderRadius, | ||
| borderWidth: borderWidth ?? this.borderWidth, | ||
| content: content ?? this.content, | ||
| ); | ||
|
|
||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(ColorProperty('background', background)) | ||
| ..add(ColorProperty('border', border)) | ||
| ..add(DiagnosticsProperty<BorderRadius>('borderRadius', borderRadius)) | ||
| ..add(DoubleProperty('borderWidth', borderWidth)) | ||
| ..add(DiagnosticsProperty<FBadgeContentStyle>('content', content)); | ||
| } | ||
|
|
||
| @override | ||
| bool operator ==(Object other) => | ||
| identical(this, other) || | ||
| other is FBadgeStyle && | ||
| runtimeType == other.runtimeType && | ||
| background == other.background && | ||
| border == other.border && | ||
| borderRadius == other.borderRadius && | ||
| borderWidth == other.borderWidth && | ||
| content == other.content; | ||
|
|
||
| @override | ||
| int get hashCode => | ||
| background.hashCode ^ border.hashCode ^ borderRadius.hashCode ^ borderWidth.hashCode ^ content.hashCode; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| part of 'badge.dart'; | ||
|
|
||
| @internal final class FBadgeContent extends StatelessWidget { | ||
|
|
||
| final String label; | ||
| final FBadgeStyle style; | ||
|
|
||
| const FBadgeContent({required this.label, required this.style, super.key}); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) => Center( | ||
| child: Padding( | ||
| padding: style.content.padding, | ||
| child: Text(label, style: style.content.label.withFont(context.theme.font)), | ||
| ), | ||
| ); | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty<FBadgeStyle>('style', style)) | ||
| ..add(StringProperty('text', label)); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /// A badge content's style. | ||
| final class FBadgeContentStyle with Diagnosticable { | ||
|
|
||
| /// The padding. | ||
| final EdgeInsets padding; | ||
|
|
||
| /// The text. | ||
| final TextStyle label; | ||
|
|
||
| /// Creates a [FBadgeContentStyle]. | ||
| FBadgeContentStyle({required this.label, this.padding = const EdgeInsets.symmetric(horizontal: 14, vertical: 2)}); | ||
|
|
||
| /// Creates a copy of this [FBadgeContentStyle] with the given properties replaced. | ||
| FBadgeContentStyle copyWith({TextStyle? label, EdgeInsets? padding}) => FBadgeContentStyle( | ||
| label: label ?? this.label, | ||
| padding: padding ?? this.padding, | ||
| ); | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty('padding', padding)) | ||
| ..add(DiagnosticsProperty('text', label)); | ||
| } | ||
|
|
||
| @override | ||
| bool operator ==(Object other) => | ||
| identical(this, other) || | ||
| other is FBadgeContentStyle && runtimeType == other.runtimeType && padding == other.padding && label == other.label; | ||
|
|
||
| @override | ||
| int get hashCode => padding.hashCode ^ label.hashCode; | ||
|
|
||
| } |
Oops, something went wrong.