From 34bed7dd908c66c5f8afcacacc0784729560da64 Mon Sep 17 00:00:00 2001 From: Alexandru Mariuti Date: Mon, 20 Jan 2025 11:55:21 +0100 Subject: [PATCH 1/2] fix: card clip behavior (#259) --- .github/workflows/flutter-test.yaml | 1 + CHANGELOG.md | 4 ++++ lib/src/components/card.dart | 10 ++++++++++ lib/src/theme/components/card.dart | 29 ++++++++++++++++++++--------- pubspec.yaml | 2 +- 5 files changed, 36 insertions(+), 10 deletions(-) diff --git a/.github/workflows/flutter-test.yaml b/.github/workflows/flutter-test.yaml index af9a2f2a..c14f9249 100644 --- a/.github/workflows/flutter-test.yaml +++ b/.github/workflows/flutter-test.yaml @@ -25,6 +25,7 @@ jobs: - uses: subosito/flutter-action@v2.18.0 with: channel: "stable" + cache: true - name: Install dependencies run: flutter pub get diff --git a/CHANGELOG.md b/CHANGELOG.md index 60face38..70ee3bab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.18.1 + +- **FIX**: Set `ShadCard` clipBehavior to `Clip.antialias`, add `clipBehavior` to `ShadCard` and `ShadCardTheme`. + ## 0.18.0 - **BREAKING CHANGE**: Remove `applyIconColorFilter` from `ShadButton`. diff --git a/lib/src/components/card.dart b/lib/src/components/card.dart index c14a571a..42019876 100644 --- a/lib/src/components/card.dart +++ b/lib/src/components/card.dart @@ -23,6 +23,7 @@ class ShadCard extends StatelessWidget { this.columnCrossAxisAlignment, this.rowMainAxisSize, this.columnMainAxisSize, + this.clipBehavior, }); final Widget? title; @@ -46,6 +47,11 @@ class ShadCard extends StatelessWidget { final MainAxisSize? rowMainAxisSize; final MainAxisSize? columnMainAxisSize; + /// {@template ShadCard.clipBehavior} + /// The clipBehavior of the card, defaults to [Clip.antiAlias]. + /// {@endtemplate} + final Clip? clipBehavior; + @override Widget build(BuildContext context) { final theme = ShadTheme.of(context); @@ -84,10 +90,14 @@ class ShadCard extends StatelessWidget { theme.cardTheme.columnCrossAxisAlignment ?? CrossAxisAlignment.start; + final effectiveClipBehavior = + clipBehavior ?? theme.cardTheme.clipBehavior ?? Clip.antiAlias; + return Container( width: width, height: height, padding: effectivePadding, + clipBehavior: effectiveClipBehavior, decoration: BoxDecoration( color: effectiveBackgroundColor, borderRadius: effectiveRadius, diff --git a/lib/src/theme/components/card.dart b/lib/src/theme/components/card.dart index 7aa1aca5..c10c6366 100644 --- a/lib/src/theme/components/card.dart +++ b/lib/src/theme/components/card.dart @@ -20,6 +20,7 @@ class ShadCardTheme { this.columnCrossAxisAlignment, this.rowMainAxisSize, this.columnMainAxisSize, + this.clipBehavior, }); final bool merge; @@ -36,6 +37,7 @@ class ShadCardTheme { final CrossAxisAlignment? columnCrossAxisAlignment; final MainAxisSize? rowMainAxisSize; final MainAxisSize? columnMainAxisSize; + final Clip? clipBehavior; static ShadCardTheme lerp( ShadCardTheme a, @@ -49,15 +51,19 @@ class ShadCardTheme { padding: EdgeInsets.lerp(a.padding, b.padding, t), radius: BorderRadius.lerp(a.radius, b.radius, t), border: Border.lerp(a.border, b.border, t), - shadows: b.shadows, + shadows: t < .5 ? a.shadows : b.shadows, width: lerpDouble(a.width, b.width, t), height: lerpDouble(a.height, b.height, t), - rowMainAxisAlignment: b.rowMainAxisAlignment, - rowCrossAxisAlignment: b.rowCrossAxisAlignment, - columnMainAxisAlignment: b.columnMainAxisAlignment, - columnCrossAxisAlignment: b.columnCrossAxisAlignment, - rowMainAxisSize: b.rowMainAxisSize, - columnMainAxisSize: b.columnMainAxisSize, + rowMainAxisAlignment: + t < .5 ? a.rowMainAxisAlignment : b.rowMainAxisAlignment, + rowCrossAxisAlignment: + t < .5 ? a.rowCrossAxisAlignment : b.rowCrossAxisAlignment, + columnMainAxisAlignment: + t < .5 ? a.columnMainAxisAlignment : b.columnMainAxisAlignment, + columnCrossAxisAlignment: + t < .5 ? a.columnCrossAxisAlignment : b.columnCrossAxisAlignment, + rowMainAxisSize: t < .5 ? a.rowMainAxisSize : b.rowMainAxisSize, + columnMainAxisSize: t < .5 ? a.columnMainAxisSize : b.columnMainAxisSize, ); } @@ -76,6 +82,7 @@ class ShadCardTheme { CrossAxisAlignment? columnCrossAxisAlignment, MainAxisSize? rowMainAxisSize, MainAxisSize? columnMainAxisSize, + Clip? clipBehavior, }) { return ShadCardTheme( merge: merge ?? this.merge, @@ -95,6 +102,7 @@ class ShadCardTheme { columnCrossAxisAlignment ?? this.columnCrossAxisAlignment, rowMainAxisSize: rowMainAxisSize ?? this.rowMainAxisSize, columnMainAxisSize: columnMainAxisSize ?? this.columnMainAxisSize, + clipBehavior: clipBehavior ?? this.clipBehavior, ); } @@ -115,6 +123,7 @@ class ShadCardTheme { columnCrossAxisAlignment: other.columnCrossAxisAlignment, rowMainAxisSize: other.rowMainAxisSize, columnMainAxisSize: other.columnMainAxisSize, + clipBehavior: other.clipBehavior, ); } @@ -136,7 +145,8 @@ class ShadCardTheme { other.columnMainAxisAlignment == columnMainAxisAlignment && other.columnCrossAxisAlignment == columnCrossAxisAlignment && other.rowMainAxisSize == rowMainAxisSize && - other.columnMainAxisSize == columnMainAxisSize; + other.columnMainAxisSize == columnMainAxisSize && + other.clipBehavior == clipBehavior; } @override @@ -154,6 +164,7 @@ class ShadCardTheme { columnMainAxisAlignment.hashCode ^ columnCrossAxisAlignment.hashCode ^ rowMainAxisSize.hashCode ^ - columnMainAxisSize.hashCode; + columnMainAxisSize.hashCode ^ + clipBehavior.hashCode; } } diff --git a/pubspec.yaml b/pubspec.yaml index 90cfc648..b6b0c05e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: shadcn_ui description: shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable. -version: 0.18.0 +version: 0.18.1 homepage: https://flutter-shadcn-ui.mariuti.com repository: https://github.com/nank1ro/flutter-shadcn-ui documentation: https://flutter-shadcn-ui.mariuti.com From f19c0641b13c9a290693df9d270078ea7b5031f1 Mon Sep 17 00:00:00 2001 From: Aman Kumar Date: Mon, 20 Jan 2025 16:29:05 +0530 Subject: [PATCH 2/2] fix: apply selected decoration (#255) Co-authored-by: Alexandru Mariuti --- lib/src/components/tabs.dart | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/src/components/tabs.dart b/lib/src/components/tabs.dart index fb685f4a..c8d82351 100644 --- a/lib/src/components/tabs.dart +++ b/lib/src/components/tabs.dart @@ -1,4 +1,5 @@ import 'dart:math' as math; + import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; @@ -713,7 +714,9 @@ class _ShadTabState extends State> { ? effectiveSelectedHoverBackgroundColor : effectiveHoverBackgroundColor, padding: effectivePadding, - decoration: effectiveDecoration, + decoration: selected + ? effectiveDecoration.mergeWith(widget.selectedDecoration) + : effectiveDecoration, foregroundColor: selected ? effectiveSelectedForegroundColor : effectiveForegroundColor,