import 'dart:ui';

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(
      theme: ThemeData(useMaterial3: true),
      home: const MyHomePage(title: 'Scrolling 3.16.0'),
    );
  }
}

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      extendBodyBehindAppBar: true,
      body: Stack(
        children: [
          ListView.separated(
            itemCount: 1000,
            itemBuilder: (_, i) {
              if (i == 0) {
                return Stack(
                  children: [
                    Container(
                      width: MediaQuery.sizeOf(context).width,
                      height: 80,
                      margin: const EdgeInsets.only(top: 10),
                      color: Colors.black,
                    ),
                    SizedBox(
                      width: MediaQuery.sizeOf(context).width,
                      height: 100,
                      child: ClipRRect(
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaY: 12, sigmaX: 12),
                          child: AppBar(
                            backgroundColor: Colors.white.withOpacity(0.3),
                            title: Text(title),
                          ),
                        ),
                      ),
                    ),
                  ],
                );
              }
              return Container(
                clipBehavior: Clip.antiAlias,
                margin: const EdgeInsets.symmetric(horizontal: 16),
                decoration: BoxDecoration(
                  color: Colors.amberAccent,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    SizedBox(
                      height: 200,
                      width: MediaQuery.sizeOf(context).width,
                    ),
                    const SizedBox(height: 4),
                    Text('Some text for $i'),
                    const SizedBox(height: 4),
                  ],
                ),
              );
            },
            separatorBuilder: (_, __) => const SizedBox(height: 8),
          ),
        ],
      ),
    );
  }
}