import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  FocusNode textFieldFocus = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverMainAxisGroup(
            slivers: [
              SliverPersistentHeader(
                pinned: true,
                delegate: _SliverTitleDelegate(
                  child: Container(
                    color: Colors.red,
                    height: 60.0,
                  ),
                  height: 60.0,
                ),
              ),
              SliverToBoxAdapter(
                  child: TextField(
                focusNode: textFieldFocus,
              )),
              SliverToBoxAdapter(
                child: Container(
                  color: Colors.green,
                  height: 500,
                ),
              ),
              SliverToBoxAdapter(
                child: Container(
                  color: Colors.black,
                  height: 500,
                ),
              ),
            ],
          )
        ],
      ),
      floatingActionButton: TextButton(
          onPressed: () {
            textFieldFocus.requestFocus();
          },
          child: const Text('Focus TextField')),
    );
  }
}

class _SliverTitleDelegate extends SliverPersistentHeaderDelegate {
  _SliverTitleDelegate({
    required this.height,
    required this.child,
  });
  final double height;
  final Widget child;

  @override
  double get minExtent => height;
  @override
  double get maxExtent => height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  bool shouldRebuild(_SliverTitleDelegate oldDelegate) => true;
}