How to show the showcaseview inside a bottomsheet

[NiiTyy]

I want to showcase some elements inside the bottomsheet but I'm unable to do so for some reasons, can anyone share on how this is done? My code so far:

static Future<Frequency?> getFrequency(BuildContext context) {
    int? frequencyType = 0;
    DateTime startDate = DateTime.now();
    DateTime endDate = DateTime.now();
    DayDelay dayDelay = DayDelay.allDayDelays[0];
    List<MultiSelectItem<WeekDay>> daysItems = WeekDay.allWeekDays
        .map((day) => MultiSelectItem<WeekDay>(day, day.name))
        .toList();
    List<int>? selectedWeekDaysIds;
    return showModalBottomSheet<Frequency>(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      backgroundColor: Colors.white,
      context: context,
      elevation: 0,
      isScrollControlled: true,
      builder: (context) {
        return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
          return DraggableScrollableSheet(
              initialChildSize: 0.9,
              maxChildSize: 0.9,
              minChildSize: 0.9,
              expand: false,
              builder: (context, scrollController) {
                return ShowCaseWidget(
                  enableAutoScroll: true,
                  blurValue: 1,
                  builder: Builder(builder: (context) {
                    return Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: CupertinoPageScaffold(...

Custom Showcase.withWidget():

InAppTutorialWidget(
                                  globalKey: CureShowcase
                                      .showcaseMedicinceOptionKeyStep1,
                                  container: CureShowcase
                                      .dailyTaskExplorerDescriptionStep1,
                                  child: ListTile(
                                    contentPadding:
                                        const EdgeInsets.only(left: 10),
                                    title: const Text('In gleichen Abständen'),
                                    leading: Radio<int>(
                                      activeColor: CureColor.primaryColor,
                                      value: 0,
                                      groupValue: frequencyType,
                                      onChanged: (int? value) {
                                        setState(() {
                                          frequencyType = value;
                                        });
                                      },
                                    ),
                                  ),
                                ),

Trigger button:

onTap: () async {
                                        Frequency? frequency =
                                            await FrequencyModal.getFrequency(
                                                    context)
                                                .then((value) {
                                          WidgetsBinding.instance
                                              .addPostFrameCallback((_) {
                                            ShowCaseWidget.of(myContext!)
                                                .startShowCase([
                                              CureShowcase
                                                  .showcaseMedicinceOptionKeyStep1,
                                              CureShowcase
                                                  .showcaseMedicinceOptionKeyStep2,
                                            ]);
                                          });
                                        });

[ujas-m-simformsolutions]

Hey @NiiTyy, If you want to show showcase inside a bottomsheet or a dialog, you will have to wrap you bottomsheet/dialog widget with ShowCaseWidget because when show a bottomsheet, it builds widget on different BuildContext.

So what you do is create a nullable BuildContext variable and set it inside the build method of new Builder which create for new ShowCaseWidget. And after calling of showBottomSheet add a postFrameCallback and start showcase inside it.

here what it would roughly look like,

BuildContext? buildContext;
             showModalBottomSheet(
              context: context,
              builder: (_) => ShowCaseWidget(
                builder: Builder(
                  builder: (showcaseContext) {
                    buildContext = showcaseContext;
                    return Center(
                      child: Showcase(
                        description: 'description',
                        key: key1,
                        child: Text('hello'),
                      ),
                    );
                  },
                ),
              ),
            );
            WidgetsBinding.instance.addPostFrameCallback((_) {
              if(buildContext != null) {
              ShowCaseWidget.of(buildContext!).startShowCase([key1]);
              }
            });

[vatsaltanna]

This issue is being closed due to inactivity. Feel free to reopen this issue if the problem continues.