Hi,My first Flutter APP is using showcaseview widget here is my code

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Showcase.withWidget(
                key: _myBook,
                width: 300,
                height: 350,
                container: Card(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(8, 10, 8, 10),
                    child: Text('小迪阅读过的绘本都\n会在这里看到哦!'),
                  ),
                ),
                child: Icon(Icons.favorite),
   )])

,But I got some trouble,the console print some log

please do me a favor, thanks a lot! below is the sdk version I'm using:

Describe the bug

To Reproduce Steps to reproduce the behavior:

1. Wrap FAB in Showcase widget
2. Open on smartphone (Android A7 smartphone)
3. See error (View attached image above)

Expected behavior Highlight FloatingActionbutton

Screenshots

Smartphone (please complete the following information):

• Device: Samsung A7
• OS: Android 8.1
• Browser N/A

Additional context Seems to work perfectly with no overlayPadding required, but for smartphone, it is WAY off.

Describe the bug I try show Showcase in showCupertinoModalBottomSheet but got weird position.

void showNameModal(BuildContext context) { showCupertinoModalBottomSheet( expand: true, context: context, backgroundColor: mainBackgroundColor, builder: (contextModal) => ShowCaseWidget(builder: Builder(builder: (context) { WidgetsBinding.instance!.addPostFrameCallback((_) { if (education.isEducationIndex == 9) ShowCaseWidget.of(context)!.startShowCase([education.ten]); }); return SingleChildScrollView( child: SafeArea( child: CustomModalBottomSheet( title: 'myCompanies/add_company/company_name'.tr, onAccept: () => navigation.back(context: context), rightWidget: Showcase( onTargetClick: () => showCasePress(context: context), onToolTipClick: () => showCasePress(context: context), disposeOnTap: true, key: education.eleven, title: 'education/saveName'.tr, description: 'education/saveNameBody'.tr, child: Icon(Icons.done, color: greenColor), ), child: Column( children: [ Showcase( onTargetClick: () => showCasePress(context: context), onToolTipClick: () => showCasePress(context: context), disposeOnTap: true, key: education.ten, title: 'education/name'.tr, description: 'education/nameShortBody'.tr, child: TextFieldBorderAll( controller: shortNameCtrl, label: 'myCompanies/add_company/short_name'.tr, ), ), SizedBox(height: 22), CustomTextArea( controller: fullNameCtrl, label: 'myCompanies/add_company/full_name'.tr, ), ], ), ), ), ); }))); }

Describe the bug A clear and concise description of what the bug is. I have tried different ways, but I keep getting the following errors:

Performing hot reload... Syncing files to device iPhone 11 Pro Max... [VERBOSE-2:shell.cc(210)] Dart Unhandled Exception: NoSuchMethodError: The method 'findAncestorStateOfType' was called on null. Receiver: null Tried calling: findAncestorStateOfType(), stack trace: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5) #1 Overlay.of (package:flutter/src/widgets/overlay.dart:258:19) #2 _OverlayBuilderState.addToOverlay (package:showcaseview/layout_overlays.dart:165:13) #3 _OverlayBuilderState.showOverlay (package:showcaseview/layout_overlays.dart:157:7) #4 _OverlayBuilderState.syncWidgetAndOverlay (package:showcaseview/layout_overlays.dart:183:7) #5 _OverlayBuilderState.reassemble. (package:showcaseview/layout_overlays.dart:137:57) #6 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15) #7 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1063:9) #8 SchedulerBinding.scheduleWarmUpFrame. (package:flut<…>

Additional context

From the error message we can see something wrong with showcaseview overlay, but I can't find ways to solve it. (I have searched on google and stackoverflow, but no results.

I closely followed the example code and also searched on other use case to apply this plugin, my code is similar like this one: https://stackoverflow.com/questions/60930636/how-can-i-use-show-case-view-in-flutter

The plugin is working (although it's not working as I expected, that can be feature suggestions, but as least it's working as the example shows). However I always get this error complain every time I start or hot reload.

When I remove all the code related with this plugin, I don't get any error complain, so it's definitely the plugin issue.

How can I solve this? does any of other people get same error like i do? is it something wrong with the plugin? thank you!

I am using the latest version of flutter and the plugin, every thing's version is the latest, I always upgrade as soon as I can.

     Showcase(
            key: beatGlobalKey,
            description: StringResource.beatShowCaseDescp,
            showcaseBackgroundColor: ColorResource.BLUE15447a,
            titleTextStyle: TextStyle(
                color: ColorResource.WHITE16dfff,
                fontFamily: Font.ProximaNovaBold.value),
            descTextStyle: TextStyle(
                color: ColorResource.WHITE16dfff,
                fontFamily: Font.ProximaNovaRegular.value),
            shapeBorder: CircleBorder(),
            showArrow: true,
            spotlightPadding: EdgeInsets.all(10),
            child: PostActionButton(
              !this.widget.post.isLike
                  ? ImageResource.unlikedIcon
                  : ImageResource.likedIcon,
              'Beat',
              tapFunction: _onTapLikePost,
              titleColor: !this.widget.post.isLike
                  ? ColorResource.BLACK2f2f2f
                  : ColorResource.BLUE16dfff,
            ),
          ),

when i used the above code, showcase is not navigating to respective screen even in botttom, and overlay also not coming could anyone help with this? Thanks in adavance !

Users expect that the showcased widget is brought into view in case it is not visible (e.g. #62).

This PR ensures that the current active Showcase is in view:

I have the different classes loaded in this screen. From top to bottom I have the AppBar, the container where I have the showcases within a Scaffold and the bottom menu.

When I show the showcases they are not positioned properly. Do I need to specify something else? I also used a GlobalKey from main but it still have the same margin.

class _RentsState extends State<Rents> {
  GlobalKey _one = GlobalKey();
  GlobalKey _two = GlobalKey();

  @override
  Widget build(BuildContext context) {

    return ShowCaseWidget(
      onComplete: (index, key) {
        if (index == 4)
          SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light
              .copyWith(
                  statusBarIconBrightness: Brightness.dark,
                  statusBarColor: Colors.white));
      },
      builder: Builder(
        builder: (context) => Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            bottom: false,
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Expanded(
                          child: Container(
                            padding: const EdgeInsets.only(left: 10, right: 8),
                            child: Container(
                              padding: const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                  color: Color(0xffF9F9F9),
                                  border: Border.all(
                                      color: Color(0xffF3F3F3), width: 2),
                                  borderRadius: BorderRadius.circular(8)),
                              child: Row(
                                children: <Widget>[
                                  Expanded(
                                    child: Row(
                                      children: <Widget>[
                                        Showcase(
                                          key: _one,
                                          description:
                                              'Tap to see menu options',
                                          child: Icon(
                                            Icons.menu,
                                            color:
                                                Theme.of(context).primaryColor,
                                          ),
                                        ),
                                        SizedBox(
                                          width: 10,
                                        ),
                                        Text(
                                          'Search email 2',
                                          style: TextStyle(
                                              color: Colors.black45,
                                              fontSize: 16,
                                              letterSpacing: 0.4),
                                        ),
                                        Spacer(),
                                        Icon(
                                          Icons.search,
                                          color: Color(0xffADADAD),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        Showcase(
                          overlayPadding: EdgeInsets.all(5),
                          key: _two,
                          title: 'Profile',
                          description:
                              'Tap to see profile which contains user\'s name, profile picture, mobile number and country',
                          contentPadding: EdgeInsets.all(8.0),
                          showcaseBackgroundColor:
                              Theme.of(context).primaryColor,
                          textColor: Colors.white,
                          shapeBorder: CircleBorder(),
                          child: Container(
                            padding: EdgeInsets.all(5),
                            width: 45,
                            height: 45,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Theme.of(context).primaryColor),
                            child: Image.asset('assets/simform.png'),
                          ),
                        ),
                        SizedBox(
                          width: 12,
                        )
                      ],
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Container(
                      padding: const EdgeInsets.only(left: 16, top: 4),
                      child: Text(
                        'PRIMARY',
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 8)),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            backgroundColor: Theme.of(context).primaryColor,
            onPressed: () {
              setState(() {
                ShowCaseWidget.of(context)!.startShowCase([_one, _two]);
              });
            },
            child: Icon(
              Icons.add,
            ),
          ),
        ),
      ),
    );
  }

Describe the bug In Flutter Web, when the app is not exactly the same size as the browser window, ToolTips/Descriptions have wrong positions and size and might even move out of the visible area.

To Reproduce Wrap the MaterialApp in some padding and/or center it with a fixed size.

import 'package:flutter/material.dart';
import 'package:showcaseview/showcaseview.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 600,
        padding: const EdgeInsets.all(20),
        child: const MaterialApp(
          title: 'Showcase Web Problems',
          home: MyHomePage(title: 'Showcase Problems on Web'),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final key1 = GlobalKey();
  final key2 = GlobalKey();
  final key3 = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ShowCaseWidget(
      builder: Builder(
        builder: (ctx) => Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Showcase(
                  key: key1,
                  description: "Showcase Item 1",
                  child: const Text("Item 1"),
                ),
                Showcase(
                  key: key2,
                  description: "Showcase Item 2",
                  child: const Text("Item 2"),
                ),
                Showcase(
                  key: key3,
                  description: "Showcase Item 3",
                  child: const Text("Item 3"),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              ShowCaseWidget.of(ctx).startShowCase([key1, key2, key3]);
            },
            tooltip: 'Let the showcase begin',
            child: const Icon(Icons.question_mark),
          ),
        ),
      ),
    );
  }
}

Expected behavior Everything should work as you would expect, i.e. with right positions and sizes.

Screenshots

Additional context For positioning, the offset of the MaterialApp has to be subtracted For sizing, MediaQuery.of(context).size should be replaced with the size of the MaterialApp

I will create a PR for a possible fix, though I ask for your mercy since it will be my first.

Is your feature request related to a problem? Please describe. No.

Describe the solution you'd like My targeted widget has two buttons, one for accepting the other for refusing. I would be nice, if you can propagate gesture event to the target children for letting the user ability to click on those buttons and managing the showcase flow manually? Currently onTap from TargetWidget handles the event and then stops propagating.

Describe the bug Page crashes when I wrap Showcase around BottomNavigationItem icons.

To Reproduce Simply wrap Showcase around the Icon

Error The following NoSuchMethodError was thrown building IconTheme(color: Color(0x8a000000), size: 24.0): The getter 'activeWidgetIds' was called on null. Receiver: null Tried calling: activeWidgetIds

The relevant error-causing widget was: BottomNavigationBar file:///E:/_project/flutter/upper_bunk_bro_frontend/lib/routes/tabs/HomePage.dart:92:30 When the exception was thrown, this was the stack: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:54:5) #1 ShowCaseWidget.activeTargetWidget (package:showcaseview/showcase_widget.dart:51:10) #2 _ShowcaseState.showOverlay (package:showcaseview/showcase.dart:171:43) #3 _ShowcaseState.didChangeDependencies (package:showcaseview/showcase.dart:164:5) #4 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4653:11)

Additional context Android simulator.

Description

I propose this pull request to migrate this plugin to null safety as it is the way to go now that Flutter 2 has been released.

Here are the changes I introduced:

• Update SDK dependency version to 2.12.0+
• Run dart migrate on existing code to remove unsafe nulls (for the package & example)
• Add a new version (0.2.0) to the changelog (as recommended)

Please check everything twice!

Testing

• [x] Tested it manually on a Android emulator

Related tickets

Closes #93

[DartError] This widget has been unmounted, so the State no longer has a context (and should be considered defunct).Consider canceling any active work during "dispose" or using the "mounted" getter to determine if the State is still active.; #0 State.context. (package:flutter/src/widgets/framework.dart:935:9) #1 State.context (package:flutter/src/widgets/framework.dart:941:6) #2 _OverlayBuilderState.addToOverlay (package:showcaseview/src/layout_overlays.dart:172:47) #3 _OverlayBuilderState.showOverlay (package:showcaseview/src/layout_overlays.dart:164:7) #4 _OverlayBuilderState.syncWidgetAndOverlay (package:showcaseview/src/layout_overlays.dart:195:7) #5 _OverlayBuilderState.reassemble. (package:showcaseview/src/layout_overlays.dart:144:39) #6 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15) #7 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:9) #8 SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:881:7) #9 Timer._createTimer. (dart:async-patch/timer_patch.dart:18:15) #10 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:398:19) #11 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:429:5) #12 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)

Happens when you try switching between screens very fast and ShowCaseWidget.of(context).startShowCase doesn't have time to start showing the showcase

Hello, I want to customize the position of my custom tooltip when using Showcase.withWidget().

Currently, my widget takes position automatically as follows. I want to place it to the center right of the target. Any tips?

Take in account the view insets of the device, such as the keyboard that is up, so that we can correctly determine if the widget should be on top or below. If you're trying to highlight something that is at the bottom of the screen and the keyboard is up, it will try to render it below the widget, which would be under the keyboard.

By taking in account view insets we can assure that widgets that are sticky to the bottom get correctly highlighted when the keyboard is up.

To test this all you need to do is make a widget sticky to the bottom of your screen, summon the keyboard and then showcase the sticky widget. You'll see that everything is blacked out except the sticky widget, but the arrow and text message will be invisible as it's below the keyboard.

Is your feature request related to a problem? Please describe. For tooltip position: Currently my tooltip including arrow to highlighted the showcase item. But somehow in some situation the tooltip showing below the showcase item, and the arrow is pointing downward.

For tooltip size: I placed two buttons on the tooltip which align to most right. When the showcase item is too small and positioned on left, the buttons seems a bit off when aligned to most right. Currently there's no way to know where I want to position the buttons.

Describe the solution you'd like

1. Provide a callback to return the tooltip position so that I able to rotate or flip the arrow
2. Size of the showcase item so that can provide more customisation when creating custom tooltip

New feature to allow the developer to optionally enable the following features for each Showcase() widget:

• Navigation icons (forward / back)
• Counter / Pager to show where in the tutorial the user is
• End icon that allows the user to end the tutorial early

Features are off by default. Parameters are optional to avoid breaking old instances.

Example Photo

Showcase(
    key: _showcaseSettings,
    showTipCountIndex: true,
    showForwardBackNav: true,
    showEndIcon: true,
    description: ref.read(getMachineNavigationTipsProvider).getTipContent('settings_top'),
    child: Text(AppLocalizations.of(context)!.screenTitlesSettings, style: kTextStyleHeading2),
)

A developer could extend the Showcase() widget to pass their own default values.