Dynamic ShowCase widget?

[erperejildo]

I have this widget:

Showcase(
      key: widget.incomeCardKey,
      description:
          'This is your balances page. In here, you will find different expenses and incomes.',
      onBarrierClick: () => debugPrint('Barrier clicked'),
      child: GestureDetector(
        onPanDown: (_) =>
            Navigator.of(context).pushNamed('/resume', arguments: balance),
        child: Card(
          key: balance.balance > 0 ? widget.incomeCardKey : null,
          color: balance.balance > 0 ? Colors.green[800] : Colors.red[800],
          elevation: 2,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                AutoSizeText(
                  balance.title,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 14,
                  ),
                  maxLines: 2,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    FittedBox(
                      fit: BoxFit.contain,
                      child: Text(
                        balance.balance.toString(),
                        textAlign: TextAlign.justify,
                        style: const TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        ),
                      ),
                    ),
                    Text(
                      translate(Helpers.showFrequency(balance.timesAYear))
                          .toLowerCase(),
                      style: const TextStyle(color: Colors.white, fontSize: 12),
                    ),
                    Container(height: 5),
                    FittedBox(
                      fit: BoxFit.contain,
                      child: Text(
                        translate('since') +
                            ' ' +
                            DateFormat.yMMMd()
                                .format(DateTime.parse(balance.fromDate)),
                        textAlign: TextAlign.justify,
                        style:
                            const TextStyle(color: Colors.white, fontSize: 12),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );

But how could I have check to whether display the ShowCase widget or not? For example, this Card is returned within a loop and I'd only like to apply the ShowCase widget for the first index.

Also, how could I trigger its navigation when clicked without duplicating this line?

[aditya-css]

Hello @erperejildo,

Also, how could I trigger its navigation when clicked without duplicating this line?

Answer: You can use onTargetClick parameter of Showcase widget and write your navigation code just there, eliminating the need to wrap your Card with GestureDetector.

But how could I have check to whether display the ShowCase widget or not? For example, this Card is returned within a loop and I'd only like to apply the ShowCase widget for the first index.

That is not dependent on the package. You can create a wrapper widget that takes a child parameter and a bool that would decide whether to wrap the child with ShowCase or not. For example:

class MyWrapper extends StatelessWidget {
 const MyWrapper({
      required this.shouldWrapWithShowcase,
      required this.child,
 });

final Widget child;
final bool shouldWrapWithShowcase;

 @override
 Widget build(BuildContext context) {
  return shouldWrapWithShowcase ?
     Showcase(
           key: // Take this as parameter of this widget as well,
           description:  // Take this as parameter of this widget as well,
           child: child.
      )
      : child;
  }
}

Closing this issue with that being said. Feel free to reopen if you need any more guidance.

[erperejildo]

Ah ok, I was previously using a similar package and it had something to enable/disable it. Edit: I saw enableShowcase: false. I was looking something like this, but rest of Showcases fail if we don't remove them. Shouldn't this be managed dynamically? I mean, it's false already, why not simply, not showing the tutorial and that's it?

About triggering the click, documentation says "Triggers when target widget is being clicked" and the examples I found are duplicating the functionality: https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/157#issuecomment-1073028176

As I mentioned, I don't want to duplicate anything, just trigger its action.