✨ Closes #166 shapeBorder need to be more customisable

SimformSolutionsPvtLtd · Nov 24, 2021 · 11bdb52 · 11bdb52
1 parent 0c7f6c3
commit 11bdb52
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 46 deletions.
diff --git 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
@@ -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
@@ -309,6 +309,7 @@ class _MailPageState extends State<MailPage> {
                         height: 50,
                         width: 140,
                         shapeBorder: CircleBorder(),
+                        radius: BorderRadius.all(Radius.circular(150)),
                         container: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: <Widget>[
@@ -480,35 +481,41 @@ class MailTile extends StatelessWidget {
                   ),
                 ),
                 Padding(padding: EdgeInsets.only(left: 8)),
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: <Widget>[
-                    Text(
-                      mail.sender,
-                      style: TextStyle(
-                        fontWeight:
-                            mail.isUnread ? FontWeight.bold : FontWeight.normal,
-                        fontSize: 17,
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: <Widget>[
+                      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
@@ -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
@@ -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<Showcase> 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<double>? 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),
+                        ),
+                      ),
             ),
           ),
         ),