flutter tutorialcoachmark wrong position

Question

I'm have 3 target of this tutorial, in second and third tutorial is working normally, but in first target of tutorial have wrong position. I tried in 2 android device and it's work normally, but I tried in other android device have wrong position of circle highlight like this, the circle must be in my red mark at top right.

the key have wrong position is keyEditButton

NOTE : ketEditButton (first target) and keySaveButton (third target) is have same position, keySaveButton have a nice position, but keyEditButton is not

this my code

void initState() {
  Future.delayed(Duration.zero, showTutorial);
}



void showTutorial() {
    tutorialON = true;
    initTargets();
    tutorialCoachMark = TutorialCoachMark(
      context,
      targets: targets,
      colorShadow: const Color(0xFF061988),
      textSkip: "SKIP",
      paddingFocus: 10,
      opacityShadow: 0.8,
      onFinish: () {
        // print("finish");
        tutorialON = false;
        categoriesTutorialPreference(true);
      },
      onClickTarget: (target) {
        // print('onClickTarget: $target');
        
      },
      onClickOverlay: (target) {
        print('onClickOverlay: $target');
      },
      onSkip: () {
        
      },
    )..show();
  }

void initTargets() {
    targets.clear();
    targets.add(
      TargetFocus(
        identify: "keyEditButton",
        keyTarget: keyEditButton,
        alignSkip: Alignment.topLeft,
        enableOverlayTab: false,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "Klik untuk edit urutan kategori",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: textHeader2
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );

    targets.add(
      TargetFocus(
        identify: "keyCategoriesContainer",
        keyTarget: keyCategoriesContainer,
        alignSkip: Alignment.topLeft,
        enableOverlayTab: false,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "klik dan tahan untuk menggeser urutan kategori",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: textHeader2
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );

    targets.add(
      TargetFocus(
        identify: "keySaveButton",
        keyTarget: keySaveButton,
        alignSkip: Alignment.topLeft,
        enableOverlayTab: false,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "Klik untuk keluar dari proses edit kategori",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: textHeader2
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

this how I add the key of this lib

appBar: AppBar(
          backgroundColor: Palette.color_primary,
          title: const Text("Categories", style: TextStyle(color: Colors.white)),
          actions: <Widget>[
            Padding(
                key: edit ? keySaveButton : keyEditButton,  // <- this key
                padding: const EdgeInsets.only(right: 20.0),
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      if (edit) {
                        btnEdit = "Edit";
                        icon = const FaIcon(FontAwesomeIcons.pen);
                        edit = false;
                      } else {
                        btnEdit = "Done";
                        icon = const FaIcon(FontAwesomeIcons.check);
                        edit = true;
                      }
                    });
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [icon],
                  ),
                )),
          ],
          iconTheme: const IconThemeData(
            color: Colors.white, //change your color here
          ),
        ),

Answer 1

Add more delays. It happens because showTutorial called when page is not fully rendered. Below, worked for me.

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

Answer 2

I like this decision the most

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    // wait when open page animation is completed
    Future.delayed(Duration.zero, () {
      ModalRoute.of(context)?.animation?.addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          showTutorial(context);
        }
      });
    });
  }