It was not possible to obtain target position.

[CorentinSIOdev]

Hello, how can I solve the problem generated by your plugin?

Error : It was not possible to obtain target position.

I put everything as in the example package.

Thanks

[RafaelBarbosatec]

Hi @CorentinSIOdev ! Could give me more information? This error is shown when not found the component position. Do the Widgets that you pass the keys is showing in the screen? If don't the package not can fount the widget position to show the tutorial.

[CorentinSIOdev]

Here is my code example:

keybutton is assigned to a given widget from a class at the bottom of the code. If I associate the key to the row widget, the tutorial works but if I associate it to a specific button it doesn't work.

// ignore_for_file: non_constant_identifier_names, deprecated_member_use

import 'dart:async';

import 'package:animate_do/animate_do.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:blbapplication/Front-End/ConceptionMultipleWidgets/BoutonsInteraction/BoutonsInteraction.dart';
import 'package:blbapplication/Front-End/ConceptionMultipleWidgets/VagueAnimation/VagueAnimation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/route_manager.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';

class BLBMainAuth extends StatefulWidget {
  const BLBMainAuth({Key? key}) : super(key: key);

  @override
  State<BLBMainAuth> createState() => _BLBMainAuthState();
}

class _BLBMainAuthState extends State<BLBMainAuth> with SingleTickerProviderStateMixin {
  // *-*-*-*-*-*-*-*-* Bool Animations d'apparition du corps de la page *-*-*-*-*-*-*-*-* //

  // Booléen d'apparition du slogan
  bool sloganTexte = false;

  // Booléen d'apparition du logo BLB
  bool logoblb = false;

  // *-*-*-*-*-*-*-*-* Importation images SVG *-*-*-*-*-*-*-*-* //

  // Chemin de l'image BLB
  static const String assetLogoBLB = 'assets/images/logos/iconSignIn.svg';

  // *-*-*-*-*-*-*-*-* Bool Animations d'apparition du bas de la page *-*-*-*-*-*-*-*-* //

  // Booléen d'apparition de boutons d'authentification
  bool bouton_connexion = false;
  bool bouton_inscription = false;

  // Booléen d'apparition des vagues
  bool clipWaves = false;

  // *-*-*-*-*-*-*-* Tutoriel premier lancement *-*-*-*-*-*-*-* //
  // Déclaration de la classes du paquet
  late TutorialCoachMark tutorialCoachMark;
  // Liste des cibles
  List<TargetFocus> targets = <TargetFocus>[];
  // Clé des cibles
  GlobalKey keyButton = GlobalKey();

  // *-*-*-*-*-*-*-*-* Initialisation *-*-*-*-*-*-*-*-* //
  @override
  void initState() {
    // *-*-*-*-*-*-*-* Tutoriel premier lancement *-*-*-*-*-*-*-* //
    Future.delayed(Duration.zero, showTutorial);
    // *-*-*-*-*-*-*-*-* Timer d'animations du corps de la page *-*-*-*-*-*-*-*-* //

    // Timer du slogan
    Timer(
      const Duration(
        milliseconds: 0
      ),
      () {
        if(mounted) {
          setState(() {
            sloganTexte = true;
          });
        }
      }
    );

    // Timer du logo
    Timer(
      const Duration(
        milliseconds: 12500
      ),
      (){
        if(mounted) {
          setState(() {
            logoblb = true;
          });
        }
      }
    );

    // *-*-*-*-*-*-*-*-* Timer d'animations du bas de la page *-*-*-*-*-*-*-*-* //

    // Timer des vagues
    Timer(
      const Duration(
        milliseconds: 0
      ),
      () {
        if(mounted) {
          setState(() {
            clipWaves = true;
          });
        }
      }
    );

    // Timer bouton connexion
    Timer(
      const Duration(
        milliseconds: 800
      ),
      () {
        if(mounted) {
          setState(() {
            bouton_connexion = true;
          });
        }
      }
    );
    // Timer bouton inscription
    Timer(
      const Duration(
        milliseconds: 900
      ),
      () {
        if(mounted) {
          setState(() {
            bouton_inscription = true;
          });
        }
      }
    );
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Container(
        color: Theme.of(context).primaryColor,
        child: Stack(
          children: <Widget>[
            // *-*-*-*-*-*-*-*-* Corps de la page *-*-*-*-*-*-*-*-* //
            SafeArea(
              child: Container(
                padding: const EdgeInsets.only(
                  top: 15,
                  right: 15,
                  left: 15
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    sloganTexte ? BounceInDown(
                      child: Container(
                        alignment: Alignment.center,
                        child: DefaultTextStyle(
                          style: const TextStyle(
                            fontSize: 26,
                            fontFamily: 'Poppins',
                          ),
                          child: AnimatedTextKit(
                            pause: const Duration(
                              milliseconds: 10
                            ),
                            totalRepeatCount: 1,
                            animatedTexts: [
                              ScaleAnimatedText('BLB c\'est...', textAlign: TextAlign.center),
                              ScaleAnimatedText('une EXPERTISE', textAlign: TextAlign.center),
                              ScaleAnimatedText('des PROCESS RIGOUREUX', textAlign: TextAlign.center),
                              ScaleAnimatedText('des COMPÉTENCES', textAlign: TextAlign.center),
                              ScaleAnimatedText('et', textAlign: TextAlign.center),
                              ScaleAnimatedText('des VALEURS HUMAINES', textAlign: TextAlign.center),
                            ],
                          ),
                        ),
                      )
                    ) : Container(),
                    logoblb ? Container(
                      alignment: Alignment.center,
                      child: BounceInDown(
                        child: SvgPicture.asset(
                          assetLogoBLB,
                          semanticsLabel: 'Logo BLB Auth',
                          color: Theme.of(context).shadowColor,
                          height: MediaQuery.of(context).size.height * 0.2,
                        ),
                      )
                    ): Container(),
                  ],
                )
              )
            ),
            // *-*-*-*-*-*-*-*-* Bas de la page *-*-*-*-*-*-*-*-* //,
            Stack(
              children: [
                // Vague de séparation du bas et corps de page
                IgnorePointer(
                  child: clipWaves ? VagueAnimationWidget().vagueAnimationWidget() : Container(),
                ),
                // Conception du bouton d'authentification
                Container(
                  alignment: Alignment.bottomCenter,
                  padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).size.height * 0.030
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      bouton_connexion ? BoutonsInteraction().interactionBoutonCouleurPrincipale(
                        keyButton,
                        () {
                          // Navigation vers la page de connexion
                          Get.offAllNamed("BLBAuthConnexion");
                        },
                        context, 'Connexion'
                      ) : Container(),
                      bouton_inscription ? BoutonsInteraction().interactionBoutonCouleurSecondaire(
                        () {
                          // Navigation vers la page d'inscription
                          Get.offAllNamed("BLBAuthInscription");
                        },
                        context, 'Inscription'
                      ) : Container()
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void showTutorial() {
    // Initialisation des cibles
    initTargets();
    // Montrer le tuto
    tutorialCoachMark = TutorialCoachMark(
      context,
      targets: targets,
      colorShadow: Colors.black,
      textSkip: "SAUTER",
      textStyleSkip: TextStyle(
        color: Theme.of(context).shadowColor,
        fontFamily: "Poppins",
        fontSize: 16
      ),
      paddingFocus: 10,
      opacityShadow: 0.4,
    )..show();
  }

  void initTargets() {
    targets.clear();
    targets.add(
      TargetFocus(
        identify: "keyButton",
        keyTarget: keyButton,
        alignSkip: Alignment.bottomRight,
        enableOverlayTab: true,
        contents: [
          TargetContent(
            align: ContentAlign.top,
            builder: (context, controller) {
              return IgnorePointer(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Titulo lorem ipsum",
                      style: TextStyle(
                        color: Theme.of(context).shadowColor,
                        fontFamily: "Inter",
                        fontSize: 18
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

[RafaelBarbosatec]

Try give more delay to start tutorial. You must ensure that the widget that has the key is rendering on the screen.

[UlyssesAlves]

Calling tutorialCoachMark.Show() inside a setState() call may have fixed this issue for me.