shapeBorder need to be more customisable

[ZahraVe]

ShowCaseView is a great package, but it lacks a simple still necessary functionality that you cannot set the 'shapeBorder' to be the same shape as the widget you use it for. For example, in one case, I want the showcase shape to be rectangular with a BorderRadius of 20 in another case with BorderRadius of 40. The package offers only two options for 'shapeBorder' (circular/rectangular with a pre-defined BorderRadius). Would you please add this functionality as well?

[vatsaltanna]

Thanks for your suggestion, we will check out the possible implementation and will update the status over here.

[ZahraVe]

@vatsaltanna Thanks for considering! Hope it is practicable.

[vatsaltanna]

@ZahraVe Have you tried RoundedRectangleBorder? it can provide the same as your expected output.

Ex:

shapeBorder: RoundedRectangleBorder(
   borderRadius: BorderRadius.all(Radius.circular(4)),
),

[ZahraVe]

@vatsaltanna Oh, yes, I did. It is not working. I looked through the package and saw that in the 'ShapePainter' Class, the radius is forced to be 3.0 if it is not circular (final radius = shapeBorder == CircleBorder() ? 50.0 : 3.0;) I assume that is the reason 'RoundedRectangleBorder' does not work.

[vatsaltanna]

Can you please share a snippet of your code? as I tried with example and it works perfectly.

[ZahraVe]

@vatsaltanna I tried that on different parts of my work, for different showcases but does not work. BTW, I am assuming you have tried Radius.circular(30) or (40) as well, since the Radius.circular(4) is not any different from 3.0.

here is one of them that I want to be rounded border.

class HomeWallShowCase extends StatelessWidget {
  const HomeWallShowCase({
    Key? key,
    required GlobalKey<State<StatefulWidget>> wallKey,
  })  : _wallKey = wallKey,
        super(key: key);

  final GlobalKey<State<StatefulWidget>> _wallKey;

  @override
  Widget build(BuildContext context) {

    final showCaseCnt = Get.put(ShowCaseController());
    final _showCaseSize = SizeConfig.safeBlockHorizontal * 50;
      
    return Positioned(
      top: SizeConfig.safeBlockVertical * 9.3,
      left: SizeConfig.safeBlockHorizontal * 1.1,
      child: SafeArea(
        child: Obx(
          () => Showcase(
            key: _wallKey,
            description: "'Hold' edit or 'Tap' to preview.",
            // shapeBorder: RoundedRectangleBorder(
            //   borderRadius: BorderRadius.circular(50.0),
            // ),
            // shapeBorder: RoundedRectangleBorder(
            //   borderRadius: BorderRadius.all(Radius.circular(4)),
            // ),

            child: Visibility(
              visible: showCaseCnt.visHomeWallSC.value,
              child: Container(
                color: kScreenBackgroundColor,
                height: _showCaseSize,
                width: _showCaseSize,
                child: Image.asset(
                  'asset/gif/home-edit.gif',
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

[vatsaltanna]

I guess you catch it right as it was 4 so I got the expected result, we will try to implement possible solutions and will update here.