SliverAppBar with expandable bottom.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.arrow_back_ios),
        ),
        title: const Center(child: Text('Productions')),
      ),
      body: CustomScrollView(slivers: [
        const _CustomSliverAppBar(),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
            childCount: 100,
          ),
        ),
      ]),
    );
  }
}

class _CustomSliverAppBar extends StatefulWidget {
  const _CustomSliverAppBar();

  @override
  State<_CustomSliverAppBar> createState() => __CustomSliverAppBarState();
}

class __CustomSliverAppBarState extends State<_CustomSliverAppBar>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  bool isExpanded = false;

  Widget _buildSliverAppBar(Size size, double i) {
    return SliverAppBar(
        title: Row(
          children: [
            const _SearchField(),
            IconButton(
              onPressed: () {
                setState(() {
                  isExpanded = !isExpanded;
                  if (isExpanded) {
                    _controller.forward();
                  } else {
                    _controller.reverse();
                  }
                });
              },
              icon: Icon(isExpanded
                  ? Icons.arrow_circle_up
                  : Icons.arrow_circle_down_rounded),
              iconSize: 30,
            ),
          ],
        ),
        bottom: PreferredSize(
            preferredSize: Size(size.width, i),
            child: SizedBox(
              height: i,
              child: ListView.builder(
                  padding: const EdgeInsets.only(top: 10),
                  itemExtent: 100,
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 40,
                  itemBuilder: (context, index) {
                    var margin = const EdgeInsets.symmetric(horizontal: 5);
                    if (index == 0) {
                      margin = margin.copyWith(left: 16);
                    } else if (index == 39) {
                      margin = margin.copyWith(right: 16);
                    }
                    return Container(
                      margin: margin,
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.black),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(child: Text('Item $index')),
                    );
                  }),
            )));
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) =>
          _buildSliverAppBar(size, _animation.value * 50),
    );
  }
}

class _SearchField extends StatefulWidget {
  const _SearchField();

  @override
  State<_SearchField> createState() => __SearchFieldState();
}

class __SearchFieldState extends State<_SearchField> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: const Color.fromARGB(137, 238, 238, 238),
          borderRadius: BorderRadius.circular(10),
        ),
        child: const TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Search',
            prefixIcon: Icon(Icons.search),
          ),
        ),
      ),
    );
  }
}