RafaelBarbosatec / tutorial_coach_mark

TutorialCoachMark
MIT License
535 stars 201 forks source link

Global Key position not working for FABs or BottomNavigationBarItem #24

Open radvansky-tomas opened 4 years ago

radvansky-tomas commented 4 years ago

Any idea how to create tutorial target for items which are part of bottom bar? items: [ new BottomNavigationBarItem( icon: new Icon(Ionicons.ios_chatbubbles), title: Container()), new BottomNavigationBarItem( icon: new Icon(Ionicons.md_people), title: Container()), new BottomNavigationBarItem( icon: new Icon(Ionicons.md_person), title: Container()), new BottomNavigationBarItem( icon: new Icon(Ionicons.md_settings), title: Container()) ])

Or if you have FAB button inside some container Row( children: <Widget>[ Container( height: 30, child: FloatingActionButton( heroTag: "attach", child: Icon(Icons.attachment,key: _addButtonKey,), onPressed: () => _displayImageOptions(), backgroundColor: Colors.white, ), ),

In those cases is target completely off area. I tried different places to reference GlobalKey, such as parent container,FAB itself, icon, wrap whole thing in center...but still off.

ahsanalidev commented 4 years ago

Try to increase the duration, or if there isn't add it, it may work , give a delay in initState .After it show tutorial.

ycv005 commented 3 years ago

I am facing the same, Problem still now solved @RafaelBarbosatec . Please have a look at it.

RafaelBarbosatec commented 3 years ago

Hi guys! Sorry for the delay. I'll take a look at this case as soon as possible. If you have suggestions and want to open a PR. feel free.

RafaelBarbosatec commented 3 years ago

Hi @radvansky-tomas ! I ran a test with your FAP example and it works perfectly. Regarding BottomNavigationBar, you would have to create a custom one as the items do not accept KEY and title is deprecated

ycv005 commented 3 years ago

Hey @radvansky-tomas , In my case, when running on the debug app, code works fine but when I am running on release apk things goes wrong. Also, I am not facing issues with the FAB. Here is my code-

  GlobalKey _one = GlobalKey();
  GlobalKey _two = GlobalKey();
bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              key: _one,
              padding: EdgeInsets.zero,
              icon: ImageIcon(
                AssetImage("assets/images/too_192_192.png"),
                color: currentIndex == 0
                    ? Theme.of(context).primaryColor
                    : Colors.grey,
              ),
              onPressed: () => changeIndex(0),
            ),
            IconButton(
              key: _two,
              padding: EdgeInsets.zero,
              icon: Icon(
                Icons.store,
                color: currentIndex == 1
                    ? Theme.of(context).primaryColor
                    : Colors.grey,
              ),
              onPressed: () => changeIndex(1),
            ),
          ],
        ),
      ),
santoshthorani commented 3 years ago

image Same here. working fine on debug but issue is occuring with releasing both android and ios. Only with bottomappbar 1st position reset is working fine .

RicentCB commented 3 years ago

@ycv005 I had the same problem, I tried too many times with different solutions because I was using streambuilder. In debug mode, it worked perfectly, but in release mode, the tutorial moved to down in the first item. In the end, I removed the FAB, and I'm using a container with a stack widget, and now works great.

aqibaja commented 3 years ago
image

same problem, any solution?? in my case , problem only appears on first target or first key @RafaelBarbosatec

RafaelBarbosatec commented 3 years ago

Hi @aqibaja ! You tried show tutorial after a some delay? Some times you show the tutorial before widget is positioned. I will run more tests as soon as possible.

RafaelBarbosatec commented 3 years ago

I update the example of the package with a bottomNavigationBar case. I not have problem. See this example: https://github.com/RafaelBarbosatec/tutorial_coach_mark/blob/master/example/lib/main.dart See what i show the tutorial calling Future.delayed(Duration.zero, showTutorial);

aqibaja commented 3 years ago

thanks for @RafaelBarbosatec , i will try 👍

WesternApps commented 11 months ago

Future.delayed(const Duration(seconds: 1), showTutorial); increase the duration