tutorial_coach_mark icon indicating copy to clipboard operation
tutorial_coach_mark copied to clipboard

Global Key position not working for FABs or BottomNavigationBarItem

Open radvansky-tomas opened this issue 5 years ago • 12 comments

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.

radvansky-tomas avatar Dec 16 '19 21:12 radvansky-tomas

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

ahsanalidev avatar Apr 08 '20 15:04 ahsanalidev

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

ycv005 avatar Dec 10 '20 12:12 ycv005

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 avatar Dec 10 '20 12:12 RafaelBarbosatec

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

RafaelBarbosatec avatar Dec 10 '20 17:12 RafaelBarbosatec

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),
            ),
          ],
        ),
      ),

ycv005 avatar Dec 10 '20 18:12 ycv005

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 .

santoshthorani avatar May 28 '21 14:05 santoshthorani

@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.

RicentCB avatar Jul 13 '21 19:07 RicentCB

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

aqibaja avatar Aug 05 '21 08:08 aqibaja

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 avatar Aug 05 '21 12:08 RafaelBarbosatec

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);

RafaelBarbosatec avatar Aug 05 '21 13:08 RafaelBarbosatec

thanks for @RafaelBarbosatec , i will try 👍

aqibaja avatar Aug 05 '21 13:08 aqibaja

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

WesternApps avatar Dec 14 '23 08:12 WesternApps