Реализуйте SliverAppBar.medium или SliverAppBar.large с помощью TabBar.

Question

Я хочу реализовать TabBar на новых средних и больших панелях приложений. Как мне это сделать? Я не нашел ни одного примера по этому поводу. Я хочу перенести свое приложение Flutter на Material 3, но не знаю, как реализовать новые панели приложений с помощью TabBar.

Это моя текущая реализация с обычным AppBar.

      return DefaultTabController(
      length: 2,
      child: NestedScrollView(
        controller: scrollController,
        headerSliverBuilder: ((context, innerBoxIsScrolled) {
          return [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverSafeArea(
                top: false,
                sliver: SliverAppBar(
                  title: Text(AppLocalizations.of(context)!.clients),
                  pinned: true,
                  floating: true,
                  forceElevated: innerBoxIsScrolled,
                  actions: [
                    if (serversProvider.clients.loadStatus == 1) ...[
                      IconButton(
                        onPressed: () => {
                          Navigator.push(context, MaterialPageRoute(
                            builder: (context) => const SearchClients()
                          ))
                        }, 
                        icon: const Icon(Icons.search),
                        tooltip: AppLocalizations.of(context)!.searchClients,
                      ),
                      const SizedBox(width: 10),
                    ]
                  ],
                  bottom: TabBar(
                    controller: tabController,
                    unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
                    tabs: [
                      Tab(
                        icon: const Icon(Icons.devices),
                        text: AppLocalizations.of(context)!.activeClients,
                      ),
                      Tab(
                        icon: const Icon(Icons.add_rounded),
                        text: AppLocalizations.of(context)!.added,
                      ),
                    ]
                  )
                ),
              ),
            )
          ];
        }), 
        body: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).scaffoldBackgroundColor,
            border: Border(
              top: BorderSide(
                color: Theme.of(context).colorScheme.onSurface.withOpacity(0.1)
              )
            )
          ),
          child: TabBarView(
            controller: tabController,
            children: [
              RefreshIndicator(
                onRefresh: fetchClients,
                child: ClientsList(
                  scrollController: scrollController,
                  loadStatus: serversProvider.clients.loadStatus,
                  data: serversProvider.clients.loadStatus == 1
                    ? serversProvider.clients.data!.autoClientsData : [],
                  fetchClients: fetchClients,
                ),
              ),
              RefreshIndicator(
                onRefresh: fetchClients,
                child: AddedList(
                  scrollController: scrollController,
                  loadStatus: serversProvider.clients.loadStatus,
                  data: serversProvider.clients.loadStatus == 1
                    ? serversProvider.clients.data!.clients : [], 
                  fetchClients: fetchClients,
                )
              ),
            ]
          )
        ),
      )
    );

Это то, что я пробовал `

      return DefaultTabController(
      length: 2,
      child: CustomScrollView(
        controller: scrollController,
        slivers: [
            SliverAppBar.large(
              title: Text(AppLocalizations.of(context)!.clients),
              actions: [
                if (serversProvider.clients.loadStatus == 1) ...[
                  IconButton(
                    onPressed: () => {
                      Navigator.push(context, MaterialPageRoute(
                        builder: (context) => const SearchClients()
                      ))
                    }, 
                    icon: const Icon(Icons.search),
                    tooltip: AppLocalizations.of(context)!.searchClients,
                  ),
                  const SizedBox(width: 10),
                ]
              ],
              bottom: TabBar(
                controller: tabController,
                unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
                tabs: [
                  Tab(
                    icon: const Icon(Icons.devices),
                    text: AppLocalizations.of(context)!.activeClients,
                  ),
                  Tab(
                    icon: const Icon(Icons.add_rounded),
                    text: AppLocalizations.of(context)!.added,
                  ),
                ]
              )
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 500,
                decoration: BoxDecoration(
                  color: Theme.of(context).scaffoldBackgroundColor,
                  border: Border(
                    top: BorderSide(
                      color: Theme.of(context).colorScheme.onSurface.withOpacity(0.1)
                    )
                  )
                ),
                child: TabBarView(
                  controller: tabController,
                  children: [
                    RefreshIndicator(
                      onRefresh: fetchClients,
                      child: ClientsList(
                        scrollController: scrollController,
                        loadStatus: serversProvider.clients.loadStatus,
                        data: serversProvider.clients.loadStatus == 1
                          ? serversProvider.clients.data!.autoClientsData : [],
                        fetchClients: fetchClients,
                      ),
                    ),
                    RefreshIndicator(
                      onRefresh: fetchClients,
                      child: AddedList(
                        scrollController: scrollController,
                        loadStatus: serversProvider.clients.loadStatus,
                        data: serversProvider.clients.loadStatus == 1
                          ? serversProvider.clients.data!.clients : [], 
                        fetchClients: fetchClients,
                      )
                    ),
                  ]
                )
              ),
            )
          ],
      )
    );

`