Flutter SliverPersistentFooter

sliver_persistent_footer_example.dart

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

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

// app
class ExampleSliverFooterApp extends StatelessWidget {
  const ExampleSliverFooterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ExampleSliverFooterPage(),
    );
  }
}

// page
class ExampleSliverFooterPage extends StatelessWidget {
  const ExampleSliverFooterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example Sliver Footer', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.blue[500],
      ),
      backgroundColor: Colors.grey[600],
      body: const CustomScrollView(
        slivers: [
          SliverSafeArea(
            sliver: SliverMainAxisGroup(
              slivers: [
                SliverSection(name: 'List1', itemCount: 4),
                SliverSection(name: 'List2', itemCount: 1),
                SliverSection(name: 'List3', itemCount: 10),
                SliverSection(name: 'List4', itemCount: 20),
                SliverSection(name: 'List5', itemCount: 20),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class SliverSection extends StatelessWidget {
  const SliverSection({
    super.key,
    required this.name,
    required this.itemCount,
  });

  final String name;
  final int itemCount;

  @override
  Widget build(BuildContext context) {
    return SliverPadding(
      padding: const EdgeInsets.all(16),
      sliver: SliverContainer(
        borderRadius: BorderRadius.circular(16),
        sliver: SliverMainAxisGroup(
          slivers: [
            // New sliver widget since Flutter 3.24
            // more no need boilerplate delegate
            // https://api.flutter.dev/flutter/widgets/PinnedHeaderSliver-class.html
            PinnedHeaderSliver(
              child: ListHeader(
                title: '$name Header',
                height: 70,
              ),
            ),

            /// SliverContainer - is a special widget from "boxy" package
            /// which allows put any foreground widget.
            ///
            /// As foreground put footer widget, it should be constant height
            /// sized and bottom aligned.
            ///
            /// For prevent footer overflow bottom items in the list
            /// add empty SizedBox after the list
            SliverContainer(
              // body
              sliver: SliverMainAxisGroup(
                slivers: [
                  ListBody(itemCount: itemCount),

                  // widget with same height as footer
                  const SliverToBoxAdapter(
                    child: SizedBox(height: 80),
                  ),
                ],
              ),

              // footer
              foreground: Align(
                alignment: Alignment.bottomCenter,
                child: ListFooter(
                  title: '$name Footer',
                  height: 80,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  final String title;
  final double height;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: const BoxDecoration(
        color: Color(0xffF0A0FF),
        border: Border(bottom: BorderSide(color: Colors.purpleAccent, width: 3))
      ),
      child: Center(
        child: Text(title, style: const TextStyle(fontSize: 16)),
      ),
    );
  }
}

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

  final String title;
  final double height;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: const BoxDecoration(
        color: Colors.greenAccent,
        border: Border(top: BorderSide(color: Colors.green, width: 3)),
      ),
      child: Center(
        child: Text(title, style: const TextStyle(fontSize: 16)),
      ),
    );
  }
}

class ListBody extends StatelessWidget {
  const ListBody({
    super.key,
    required this.itemCount,
  });

  final int itemCount;

  @override
  Widget build(BuildContext context) {
    const divider = Divider(color: Colors.grey, height: 0, thickness: 0.5);
    return SliverList.separated(
      itemCount: itemCount,
      itemBuilder: (context, index) {
        return ListItem(title: 'Item ${index + 1}');
      },
      separatorBuilder: (_, __) => divider,
    );
  }
}

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      color: Colors.white,
      child: Center(child: Text(title)),
    );
  }
}