Flutter – How to pin tabs below the app bar when scrolling over

You can do it without additional package by using SliverMainAxisGroup to make SliverAppBar pinned up and the content above will hidden while scrolled down.

Sample code below:

import 'package:flutter/material.dart';

void main() => runApp(const SliverMainAxisGroupExampleApp());

class SliverMainAxisGroupExampleApp extends StatelessWidget {
  const SliverMainAxisGroupExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('App Bar')),
        body: const SliverMainAxisGroupExample(),
      ),
    );
  }
}

class SliverMainAxisGroupExample extends StatelessWidget {
  const SliverMainAxisGroupExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverToBoxAdapter(
          child: Container(
            color: Colors.cyan,
            height: 100,
            child: Text('To be hidden', style: TextStyle(fontSize: 24)),
          ),
        ),
        SliverMainAxisGroup(
          slivers: <Widget>[
            const SliverAppBar(
              title: Text('Pinned tabs'),
              expandedHeight: 70.0,
              pinned: true,
            ),
            SliverList.builder(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: index.isEven ? Colors.amber[300] : Colors.blue[300],
                  height: 100.0,
                  child: Center(
                    child: Text(
                      'Item $index',
                      style: const TextStyle(fontSize: 24),
                    ),
                  ),
                );
              },
              itemCount: 10,
            ),
          ],
        ),
      ],
    );
  }
}

And this is the result:

Hopefully it can solve your problem, Thanks 😉