SimformSolutionsPvtLtd / flutter_showcaseview

Flutter plugin that allows you to showcase your features on flutter application. 👌🔝🎉
https://pub.dev/packages/showcaseview
MIT License
1.49k stars 433 forks source link

Using showcase with GetX #403

Closed eugenepranoto closed 7 months ago

eugenepranoto commented 9 months ago

Describe the bug I try to run simple showcase but it keep showing error "The following _Exception was thrown during a scheduler callback: Exception: Please provide ShowCaseView context"

To Reproduce

class HomeController extends GetxController {
  final changeButtonKey = GlobalKey();
  final micButtonKey = GlobalKey();

  @override
  void onInit() {
    super.onInit();
    WidgetsBinding.instance.addPostFrameCallback((_) => _initHomeTour());
  }
    void _initHomeTour() {
      final currentContext = Get.context;
      if (currentContext != null) {
        ShowCaseWidget.of(currentContext)
            .startShowCase([changeButtonKey, micButtonKey]);
      }
   }
  }

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          key: controller.homeContainerKey,
          appBar: AppBar(
                  title: Image.asset(logoAsset),
                  leadingWidth: 100,
                  actions: [
                    Padding(
                      padding: const EdgeInsets.only(right: largePadding),
                      child: Row(
                        children: [
                          const SizedBox(
                            width: smallGap,
                          ),
                          Container(
                              decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.circular(xsmallRadius),
                                  color: lightGrey),
                              child: IconButton(
                                  icon: Icon(
                                    Icons.menu,
                                    color:
                                        Theme.of(context).colorScheme.tertiary,
                                  ),
                                  onPressed: () => {}))
                        ],
                      ),
                    )
                  ],
                  centerTitle: false,
                  backgroundColor: Colors.transparent,
                ),
          extendBodyBehindAppBar: true,
          body: ShowCaseWidget(
              builder: Builder(builder: (context) => _buildContent())),
        ));
  }

  Widget _buildContent() {
    return const Stack(
      fit: StackFit.expand,
      children: [
        HomeMainContent(),
        HomeMessageContent(),
      ],
    );
  }
}

class HomeMainContent extends GetView<HomeController> {
  const HomeMainContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() => Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(avatarAssets[
                controller.currentAvatar.value.toString()]!["background"]!),
            fit: BoxFit.cover,
          ),
        ),
        child: _buildContent()));
  }

  Widget _buildContent() {
    return SafeArea(
        child: Padding(
      padding: const EdgeInsets.all(xlargePadding),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const SizedBox(
            height: largePadding,
          ),
          _chatSection()
        ],
      ),
    ));
  }

  Widget _chatSection() {
    return Builder(builder: (context) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GestureDetector(
              onTap: () {
                controller.openAvatarSelection();
              },
              child: Showcase(
                key: controller.changeButtonKey,
                blurValue: 0.0,
                description: "x",
                child: Column(
                  children: [
                    Image.asset(avatarAssets[
                        controller.currentAvatar.value.toString()]!["head"]!),
                    Image.asset(changeAvatarAsset),
                  ],
                ),
              )),
          GestureDetector(
              onTap: () {
                controller.toggleListening();
              },
              child: Obx(() => Opacity(
                    opacity: controller.isLoading.value ? 0.5 : 1,
                    child: Showcase(
                        key: controller.micButtonKey,
                        description: "b",
                        blurValue: 0.0,
                        child: Container(
                          width: 80,
                          height: 80,
                          decoration: BoxDecoration(
                            color: controller.isListening.value
                                ? darkOrange
                                : Theme.of(context)
                                    .colorScheme
                                    .primaryContainer,
                            borderRadius: BorderRadius.circular(50.0),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              controller.isListening.value
                                  ? const SoundWaveformWidget()
                                  : Image.asset(
                                      micIcon,
                                      width: 20,
                                    )
                            ],
                          ),
                        )),
                  ))),
          GestureDetector(
            onTap: () {
              controller.animateDragScroll(0.5);
            },
            child: Image.asset(
              messageIcon,
            ),
          )
        ],
      );
    });
  }
}

Expected behavior Show case working properly

Screenshots

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

aditya-css commented 7 months ago

Hi @eugenepranoto, Thank you for using this package. I believe the error denotes that you haven't used ShowCaseWidget. Please make sure you follow steps as shown here: https://pub.dev/packages/showcaseview#installing.

Please wrap the widget where you want to use this package with ShowCaseWidget.

I am closing this issue with this comment. Please feel free to reopen or file another issue if you face any difficulties.