如何创建带有选项卡的用户指南

Question

我有这些选项卡：

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,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

看起来像这样：

我的想法是第一次向用户展示分步指南。为此，我正在使用这个包并且它工作正常： https://pub.dev/packages/tutorial_coach_mark

现在，我按照包中的步骤突出显示该页面上的一个元素：

但我想知道当同一页面中有一些选项卡时如何让它工作。因此，下一个要突出显示的元素将是绿卡，但这会作为选项卡加载：

const BalancesScreen(),

我需要为每个页面重复相同的配置吗？在显示主容器的内容后，如何连接所有这些内容以显示选项卡中的内容？

我正在考虑一个提供商，但不确定这是否是该软件包的选项。

Answer 1

就像将密钥传递到第二个屏幕一样简单。

BalancesScreen(incomeCardKey: incomeCard)