TargetFocus position is not stable.

[dongnqda]

Anyone can help me with this ? I have tried WidgetsBinding , Future.delay (Sometime showTutorial function doesn't get called, if I go back to previous screen, it's called)

[lucas-242]

Any update for this issue?

[RafaelBarbosatec]

Hi @dongnqda !
Thanks for reporting.

I'll look into it.
Could you share code or more details?

[lucas-242]

Hi @RafaelBarbosatec
I know that you ask @dongnqda , but i will provide my code to try help with this issue too.

I have a Widget called AppShell, where I call the show method.
This widget is composed by a BlocBuilder and a Scaffold with an appBar and a BottomNavigation.

@override
  void initState() {
    context.read<AppCubit>().changePage(0);
    Future.delayed(const Duration(seconds: 1), showOnboarding);
    // WidgetsBinding.instance.addPostFrameCallback((_) => showOnboarding());
    _listenUser();
    super.initState();
  }

  void showOnboarding() {
    if (widget.showOnboarding) {
      AppOnboarding.instance.show(context: context);
    }
  }

@override
  Widget build(BuildContext context) {
    final cubit = context.read<AppCubit>();

    return BlocBuilder<AppCubit, int>(
      builder: (context, state) {
        return Scaffold(
          appBar: const CustomAppBar(),
          body: widget.child,
          resizeToAvoidBottomInset: false,
          bottomNavigationBar: CustomBottomNavigation(
            currentPage: context.watch<AppCubit>().state,
            onTap: (index) => _onTapBottomItem(index, context),
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: Align(
            alignment: Alignment.bottomCenter,
            heightFactor: 1.5,
            child: DecoratedBox(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.white, width: 4),
                shape: BoxShape.circle,
              ),
              child: FloatingActionButton(
                onPressed: _onTapFloatingActionButton,
                tooltip: AppLocalizations.current.newService,
                child: Icon(cubit.isAddServicePage ? Icons.close : Icons.add),
              ),
            ),
          ),
        );
      },
    );
  }

That is my widget that is rendered inside the scaffold.

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          InfoCard(
            key: AppOnboarding.stepOne,
            title: NumberFormatHelper.formatCurrency(
                context, state.totalWithDiscount),
            subtitle: AppLocalizations.current.myBalance,
            icon: AppAssets.services,
            color: AppColors.green,
          ),
          InfoCard(
            key: AppOnboarding.stepTwo,
            title: NumberFormatHelper.formatCurrency(
                context, state.totalDiscounted),
            subtitle: AppLocalizations.current.discounts,
            icon: AppAssets.fire,
            color: AppColors.orange,
          ),
          InfoCard(
            key: AppOnboarding.stepThree,
            title: NumberFormatHelper.formatCurrency(context, state.totalValue),
            subtitle: AppLocalizations.current.totalReceived,
            icon: AppAssets.rocket,
            color: AppColors.blue,
          ),
          ...

That is the result:

If I remove the AppBar, TargetFocus position are correct:

[RafaelBarbosatec]

Thanks for your example.
Do you have the same problem? Not show sometimes?
Could you tell me better about your problem?

[lucas-242]

Thanks for your example. Do you have the same problem? Not show sometimes? Could you tell me better about your problem?

The problem is that all TargetFocus are in the wrong position. And as I mentioned above, if I remove the AppBar the TargetFocus goes in the correct place.
I didn't notice any other related issues.

[lybur]

I also encountered the same issue when running the app tour inside WidgetsBinding.instance.addPostFrameCallback. Sometimes, the target focus does not display. My targets are enclosed within a BottomNavigationBar, which is further wrapped inside a BottomAppBar.

[Fle9ma]

Any updates on this? 🤔