tutorial_coach_mark
tutorial_coach_mark copied to clipboard
Global Key position not working for FABs or BottomNavigationBarItem
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.
Try to increase the duration, or if there isn't add it, it may work , give a delay in initState .After it show tutorial.
I am facing the same, Problem still now solved @RafaelBarbosatec . Please have a look at it.
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.
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
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),
),
],
),
),
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 .
@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.

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.
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);
thanks for @RafaelBarbosatec , i will try 👍
Future.delayed(const Duration(seconds: 1), showTutorial); increase the duration