Skip to content
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

Jump to bottom

YaruBanner: adapt inner to outer border radius #187

Merged
merged 2 commits into from Aug 25, 2022
Merged

YaruBanner: adapt inner to outer border radius #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
842e63b
YaruBanner: adapt inner to outer border radius
Jupi007 Aug 25, 2022
8301e4b
Add comment
Jupi007 Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 25 additions & 0 deletions lib/src/extensions/inner_border_radius.dart
View file
Open in desktop
@@ -0,0 +1,25 @@
import 'package:flutter/widgets.dart';

extension InnerBorderRadius on BorderRadius {
/// Computer an inner border radius from a given padding
BorderRadius inner(EdgeInsets padding) {
return BorderRadius.only(
topLeft: Radius.elliptical(
topLeft.x - padding.left / 2,
topLeft.y - padding.top / 2,
),
topRight: Radius.elliptical(
topRight.x - padding.right / 2,
topRight.y - padding.top / 2,
),
bottomRight: Radius.elliptical(
bottomRight.x - padding.right / 2,
bottomRight.y - padding.bottom / 2,
),
bottomLeft: Radius.elliptical(
bottomLeft.x - padding.left / 2,
bottomLeft.y - padding.bottom / 2,
),
);
}
}
6 changes: 4 additions & 2 deletions lib/src/utilities/yaru_banner.dart
View file
Open in desktop
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:yaru_widgets/src/extensions/inner_border_radius.dart';
import 'package:yaru_widgets/yaru_widgets.dart';

/// A colorable [Card] with a border which is tap-able via an [onTap] callback.
Expand Down Expand Up @@ -62,7 +63,7 @@ class YaruBanner extends StatelessWidget {
return InkWell(
onTap: onTap,
borderRadius: borderRadius,
hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

woops xD

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did I do that 😅 sorry.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

np I fixed it 🖌️

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks :)

hoverColor: Theme.of(context).primaryColor.withOpacity(0.3),
child: surfaceTintColor != null
? Stack(
children: [
Expand Down Expand Up @@ -163,7 +164,8 @@ class _Banner extends StatelessWidget {
surfaceTintColor: color,
elevation: elevation,
shape: RoundedRectangleBorder(
borderRadius: borderRadius,
borderRadius: borderRadius
.inner(const EdgeInsets.all(4.0)), // 4 is the default margin
side: BorderSide(color: Theme.of(context).dividerColor, width: 1),
),
child: Align(
Expand Down
21 changes: 2 additions & 19 deletions lib/src/utilities/yaru_selectable_container.dart
View file
Open in desktop
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:yaru_widgets/src/constants.dart';
import 'package:yaru_widgets/src/extensions/inner_border_radius.dart';

class YaruSelectableContainer extends StatelessWidget {
/// Creates a Image Tile from the image path given in the path property.
Expand Down Expand Up @@ -43,24 +44,6 @@ class YaruSelectableContainer extends StatelessWidget {
Widget build(BuildContext context) {
final padding = this.padding ?? const EdgeInsets.all(6);
final borderRadius = this.borderRadius ?? BorderRadius.circular(radius);
final innerBorderRadius = BorderRadius.only(
topLeft: Radius.elliptical(
borderRadius.topLeft.x - padding.left / 2,
borderRadius.topLeft.y - padding.top / 2,
),
topRight: Radius.elliptical(
borderRadius.topRight.x - padding.right / 2,
borderRadius.topRight.y - padding.top / 2,
),
bottomRight: Radius.elliptical(
borderRadius.bottomRight.x - padding.right / 2,
borderRadius.bottomRight.y - padding.bottom / 2,
),
bottomLeft: Radius.elliptical(
borderRadius.bottomLeft.x - padding.left / 2,
borderRadius.bottomLeft.y - padding.bottom / 2,
),
);

return InkWell(
borderRadius: borderRadius,
Expand All @@ -76,7 +59,7 @@ class YaruSelectableContainer extends StatelessWidget {
child: Padding(
padding: padding,
child: ClipRRect(
borderRadius: innerBorderRadius,
borderRadius: borderRadius.inner(padding),
child: child,
),
),
Expand Down