From 11bdb527dfeac3a43f54771218b00c41b9ca667a Mon Sep 17 00:00:00 2001 From: Vatsal Tanna Date: Tue, 23 Nov 2021 14:41:59 +0530 Subject: [PATCH] :sparkles: Closes #166 shapeBorder need to be more customisable --- CHANGELOG.md | 4 +++ README.md | 1 + example/lib/main.dart | 59 ++++++++++++++++++++++----------------- lib/src/custom_paint.dart | 14 ++++++++-- lib/src/showcase.dart | 45 +++++++++++++++++------------ 5 files changed, 77 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ad0bb7f..058b41f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## [1.1.4] - November 23, 2021 + +- Fixed [#166](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/166) - shapeBorder need to be more customisable + ## [1.1.3] - October 28, 2021 - Fixed [#158](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/158) - Arrow animation is not synchronized with tooltip diff --git a/README.md b/README.md index 27729d3c..195d731f 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ Showcase( description: 'Click here to go to your Profile', disableAnimation: true, shapeBorder: CircleBorder(), + radius: BorderRadius.all(Radius.circular(40)), showArrow: false, overlayPadding: EdgeInsets.all(5), slideDuration: Duration(milliseconds: 1500), diff --git a/example/lib/main.dart b/example/lib/main.dart index dff4eb7d..8947594a 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -309,6 +309,7 @@ class _MailPageState extends State { height: 50, width: 140, shapeBorder: CircleBorder(), + radius: BorderRadius.all(Radius.circular(150)), container: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -480,35 +481,41 @@ class MailTile extends StatelessWidget { ), ), Padding(padding: EdgeInsets.only(left: 8)), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - mail.sender, - style: TextStyle( - fontWeight: - mail.isUnread ? FontWeight.bold : FontWeight.normal, - fontSize: 17, + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + mail.sender, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontWeight: mail.isUnread + ? FontWeight.bold + : FontWeight.normal, + fontSize: 17, + ), ), - ), - Text( - mail.sub, - style: TextStyle( - fontWeight: FontWeight.normal, - fontSize: 16, + Text( + mail.sub, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontWeight: FontWeight.normal, + fontSize: 16, + ), ), - ), - Text( - mail.msg, - style: TextStyle( - fontWeight: FontWeight.normal, - color: mail.isUnread - ? Theme.of(context).primaryColor - : Colors.black, - fontSize: 15, + Text( + mail.msg, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontWeight: FontWeight.normal, + color: mail.isUnread + ? Theme.of(context).primaryColor + : Colors.black, + fontSize: 15, + ), ), - ), - ], + ], + ), ) ], ), diff --git a/lib/src/custom_paint.dart b/lib/src/custom_paint.dart index c2f1f089..2086bc03 100644 --- a/lib/src/custom_paint.dart +++ b/lib/src/custom_paint.dart @@ -27,12 +27,14 @@ class ShapePainter extends CustomPainter { final ShapeBorder? shapeBorder; final Color? color; final double? opacity; + final BorderRadius? radius; ShapePainter({ required this.rect, this.color, this.shapeBorder, this.opacity, + this.radius, }); @override @@ -42,9 +44,17 @@ class ShapePainter extends CustomPainter { final outer = RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(0)); - final radius = shapeBorder == CircleBorder() ? 50.0 : 3.0; + final customRadius = shapeBorder == CircleBorder() + ? Radius.circular(50.0) + : Radius.circular(3.0); - final inner = RRect.fromRectAndRadius(rect, Radius.circular(radius)); + final inner = RRect.fromRectAndCorners( + rect, + topLeft: (radius?.topLeft ?? customRadius), + topRight: (radius?.topRight ?? customRadius), + bottomLeft: (radius?.bottomLeft ?? customRadius), + bottomRight: (radius?.bottomRight ?? customRadius), + ); canvas.drawDRRect(outer, inner, paint); } diff --git a/lib/src/showcase.dart b/lib/src/showcase.dart index 1715b9a2..6a297fc1 100644 --- a/lib/src/showcase.dart +++ b/lib/src/showcase.dart @@ -39,6 +39,7 @@ class Showcase extends StatefulWidget { final String? title; final String? description; final ShapeBorder? shapeBorder; + final BorderRadius? radius; final TextStyle? titleTextStyle; final TextStyle? descTextStyle; final EdgeInsets contentPadding; @@ -63,6 +64,7 @@ class Showcase extends StatefulWidget { this.title, required this.description, this.shapeBorder, + this.radius, this.overlayColor = Colors.black, this.overlayOpacity = 0.75, this.titleTextStyle, @@ -103,6 +105,7 @@ class Showcase extends StatefulWidget { this.title, this.description, this.shapeBorder, + this.radius, this.overlayColor = Colors.black, this.overlayOpacity = 0.75, this.titleTextStyle, @@ -261,10 +264,12 @@ class _ShowcaseState extends State with TickerProviderStateMixin { height: MediaQuery.of(context).size.height, child: CustomPaint( painter: ShapePainter( - opacity: widget.overlayOpacity, - rect: position!.getRect(), - shapeBorder: widget.shapeBorder, - color: widget.overlayColor), + opacity: widget.overlayOpacity, + rect: position!.getRect(), + shapeBorder: widget.shapeBorder, + radius: widget.radius, + color: widget.overlayColor, + ), ), ), ), @@ -303,15 +308,17 @@ class _TargetWidget extends StatelessWidget { final Animation? widthAnimation; final VoidCallback? onTap; final ShapeBorder? shapeBorder; + final BorderRadius? radius; - _TargetWidget({ - Key? key, - required this.offset, - this.size, - this.widthAnimation, - this.onTap, - this.shapeBorder, - }) : super(key: key); + _TargetWidget( + {Key? key, + required this.offset, + this.size, + this.widthAnimation, + this.onTap, + this.shapeBorder, + this.radius}) + : super(key: key); @override Widget build(BuildContext context) { @@ -326,12 +333,14 @@ class _TargetWidget extends StatelessWidget { height: size!.height + 16, width: size!.width + 16, decoration: ShapeDecoration( - shape: shapeBorder ?? - RoundedRectangleBorder( - borderRadius: const BorderRadius.all( - Radius.circular(8), - ), - ), + shape: radius != null + ? RoundedRectangleBorder(borderRadius: radius!) + : shapeBorder ?? + RoundedRectangleBorder( + borderRadius: BorderRadius.all( + Radius.circular(8), + ), + ), ), ), ),