How to create an user guide with tabs?

Not really an issue, what I was wondering how to do this.

I have these tabs:

    Widget tabs() {
        return Scaffold(
          body: SafeArea(
            child: NotificationListener(
              child: TabBarView(
                controller: _leaseTabController,
                children: <Widget>[
                  const OptionsScreen(),
                  const BalancesScreen(),
                  ResumeScreen(
                    balance: Balance(
                      id: "",
                      title: "",
                      balance: 0,
                      fromDate: DateTime.now().toString(),
                      timesAYear: 1,
                    ),
                    global: true,
                  ),
                ],
              ),
            ),
          ),
          bottomNavigationBar: Container(
            width: double.infinity,
            color: Theme.of(context).primaryColor,
            child: TabBar(
              isScrollable: true,
              controller: _leaseTabController,
              indicator: const UnderlineTabIndicator(
                borderSide: BorderSide(
                  width: 5.0,
                  color: Colors.white,
                ),
              ),
              tabs: [
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 8),
                  child: Tab(
                    child: Icon(LineIcons.cog, color: Colors.white),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: Tab(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Icon(LineIcons.list, color: Colors.white),
                        Container(width: 10),
                        Text(
                          key: navigationBalances,
                          translate('balances'),
                          style: const TextStyle(color: Colors.white),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: Tab(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Icon(LineIcons.coins, color: Colors.white),
                        Container(width: 10),
                        Text(
                          translate('total'),
                          style: const TextStyle(color: Colors.white),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }

looking like that:

My idea is to show to the user a step-by-step guide for the first time. For that, I'm using this package and it's working fine: https://pub.dev/packages/tutorial_coach_mark

Right now, I'm highlighting an element on that page following the steps from the package:

but I was wondering how can I have it working when there are some tabs in the same page. So next element to highlight would be the green card, but this is loaded as a tab:

const BalancesScreen(),

Do I need to repeat the same configuration for each page? How can I connect all of them to show something from a tab after showing something for the main container?

I was thinking on a provider, but not sure if that's the options for this package or not.

RafaelBarbosatec / tutorial_coach_mark

How to create an user guide with tabs? #180