sliver_demo.dart

import 'package:boxy/slivers.dart';
import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => const HomeScreen(),
      },
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sliver Demo'),
        elevation: 0,
      ),
      body: CustomScrollView(
        slivers: [
          SliverListCard(
            margin: SliverListCard.defaultMargin.copyWith(
              bottom: 0.0,
            ),
            title: const Text('Card A'),
            itemCount: 100,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 16.0,
                vertical: 8.0,
              ),
              child: Text('Row ${index + 1}'),
            ),
          ),
          SliverListCard(
            title: const Text('Card B'),
            itemCount: 100,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 16.0,
                vertical: 8.0,
              ),
              child: Text('Row ${index + 1}'),
            ),
          ),
        ],
      ),
    );
  }
}

class SliverListCard extends StatelessWidget {
  const SliverListCard({
    super.key,
    this.margin = defaultMargin,
    required this.title,
    required this.itemCount,
    required this.itemBuilder,
  });

  final EdgeInsets margin;
  final Widget title;
  final int itemCount;
  final IndexedWidgetBuilder itemBuilder;

  static const EdgeInsets defaultMargin = EdgeInsets.all(16.0);

  @override
  Widget build(BuildContext context) {
    return SliverPadding(
      padding: EdgeInsets.only(
        left: margin.left,
        right: margin.right,
        bottom: margin.bottom,
      ),
      sliver: MultiSliver(
        pushPinnedChildren: true,
        children: [
          SliverStack(
            insetOnOverlap: true,
            children: [
              SliverPositioned.fill(
                top: margin.top,
                child: const DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(
                      Radius.circular(8.0),
                    ),
                  ),
                ),
              ),
              MultiSliver(
                children: [
                  SliverPinnedHeader(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        const SizedBox(height: 16.0),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: DefaultTextStyle.merge(
                            style: Theme.of(context).textTheme.titleLarge,
                            child: title,
                          ),
                        ),
                        const Divider(thickness: 1, height: 1),
                      ],
                    ),
                  ),
                  SliverClip(
                    child: SliverList(
                      delegate: SliverChildBuilderDelegate(
                        childCount: itemCount,
                        itemBuilder,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class SliverListCard2 extends StatelessWidget {
  const SliverListCard2({
    super.key,
    this.margin = defaultMargin,
    required this.title,
    required this.itemCount,
    required this.itemBuilder,
  });

  final EdgeInsets margin;
  final Widget title;
  final int itemCount;
  final IndexedWidgetBuilder itemBuilder;

  static const EdgeInsets defaultMargin = EdgeInsets.all(16.0);

  @override
  Widget build(BuildContext context) {
    return SliverContainer(
      clipBehavior: Clip.antiAlias,
      borderRadius: const BorderRadius.all(
        Radius.circular(8.0),
      ),
      background: const DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(
            Radius.circular(8.0),
          ),
        ),
      ),
      margin: margin,
      sliver: MultiSliver(
        pushPinnedChildren: true,
        children: [
          SliverPinnedHeader(
            child: Material(
              color: Colors.grey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: DefaultTextStyle.merge(
                      style: Theme.of(context).textTheme.titleLarge,
                      child: title,
                    ),
                  ),
                  const Divider(thickness: 1, height: 1),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              childCount: itemCount,
              itemBuilder,
            ),
          ),
        ],
      ),
    );
  }
}