Examples of using Slivers

[gidrokolbaska]

Hello! Could you please add an example app with using Sliver widgets? For example the app that you showcase in the readme:

But using SliverAppBar as #header, SliverList as #content and some kind of a sliver that represents the #avatar.
For now, I have no idea how to do that with this package. Yes, I've taken a look at the tests folder (boxy_sliver_test.dart to be exact) but the code is so dirty that I can barely understand what is written in there. And the wiki page also lacks the info regarding the stuff that you;ve implemented in version 2.0.0

[gidrokolbaska]

Since there is no activity unfortunatelly, I've came up with a, as I believe, dirty workaround. Seems to work pretty well so far...
Might help someone until the author provides some proper examples.

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

const double kAvatarRadius = 40.0;
const double kAvatarDiameter = kAvatarRadius * 2;
const double kHeaderMaxExtent = 200.0;
const double kHeaderMinExtent = 75.0;
const double kMinAvatarScaleFactor = 0.6; // Avatar shrinks to 60% of its size
const double kAvatarRightShiftMax = 50.0; // Avatar shifts 50px to the right

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

  @override
  State<BoxySliverWidget> createState() => _BoxySliverWidgetState();
}

class _BoxySliverWidgetState extends State<BoxySliverWidget> {
  late ScrollController _scrollController;
  double _currentShrinkOffset = 0.0;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() {
    // Calculate the actual shrink offset of the header itself
    double effectiveScrollOffset = _scrollController.offset;
    // The header starts shrinking only after scrolling past its non-pinned part if it had one.
    // For a pinned header that starts at the top, offset is directly related to shrink.
    // The shrinkOffset for SliverPersistentHeader is how much its size has reduced from maxExtent.
    // It's 0 when header is at maxExtent, and (maxExtent - minExtent) when at minExtent.
    double newShrinkOffset = effectiveScrollOffset.clamp(
      0.0,
      kHeaderMaxExtent - kHeaderMinExtent,
    );

    if (newShrinkOffset != _currentShrinkOffset) {
      setState(() {
        _currentShrinkOffset = newShrinkOffset;
      });
    }
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double scrollableHeightRange = kHeaderMaxExtent - kHeaderMinExtent;
    // Ensure scrollableHeightRange is not zero to avoid division by zero
    final double scrollProgress =
        scrollableHeightRange > 0
            ? (_currentShrinkOffset / scrollableHeightRange).clamp(0.0, 1.0)
            : 0.0;

    final double currentAvatarRadius =
        kAvatarRadius * (1 - (1 - kMinAvatarScaleFactor) * scrollProgress);

    return Scaffold(
      body: CustomBoxy(
        delegate: _MyAvatarOverlayDelegate(
          headerMaxExtent: kHeaderMaxExtent,
          avatarRadius:
              currentAvatarRadius, // Pass the dynamically calculated radius
          currentShrinkOffset: _currentShrinkOffset,
          scrollProgress: scrollProgress, // Pass scroll progress
        ),
        children: [
          // Child 0: The main scrollable content
          CustomScrollView(
            controller: _scrollController,
            slivers: [
              SliverPersistentHeader(
                pinned: true,
                delegate: _MyHeaderDelegate(
                  myMaxExtent: kHeaderMaxExtent,
                  myMinExtent: kHeaderMinExtent,
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) => ListTile(title: Text('Item $index')),
                  childCount: 30,
                ),
              ),
            ],
          ),
          // Child 1: The Avatar
          // The CircleAvatar will be sized by the _MyAvatarOverlayDelegate
          // using avatar.layout(constraints.loosen())
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.white, width: 4),
              color: Colors.lightBlue,
            ),
            width: currentAvatarRadius * 2,
            height: currentAvatarRadius * 2,
            child: Icon(
              Icons.person,
              color: Colors.white,
              size: currentAvatarRadius * 1.5,
            ),
          ),
        ],
      ),
    );
  }
}

class _MyAvatarOverlayDelegate extends BoxyDelegate {
  final double headerMaxExtent;
  final double
  avatarRadius; // This will now be the current (potentially smaller) radius
  final double currentShrinkOffset;
  final double scrollProgress; // New field for scroll progress (0.0 to 1.0)

  _MyAvatarOverlayDelegate({
    required this.headerMaxExtent,
    required this.avatarRadius, // Receives the current avatar radius
    required this.currentShrinkOffset,
    required this.scrollProgress, // New constructor parameter
  });

  @override
  Size layout() {
    final scrollableView = children[0];
    final avatar = children[1];

    // 1. Layout the CustomScrollView to fill available space
    final scrollableViewSize = scrollableView.layout(constraints);

    // 2. Layout the Avatar
    // The CircleAvatar will size itself due to constraints.loosen()
    final avatarSize = avatar.layout(constraints.loosen());

    // 3. Position the CustomScrollView
    scrollableView.position(Offset.zero);

    // 4. Position the Avatar
    // Initial centered X position (when scrollProgress is 0)
    final double initialAvatarCenterX =
        (scrollableViewSize.width - avatarSize.width) / 2;
    // Calculate horizontal shift based on scrollProgress
    final double horizontalShift = kAvatarRightShiftMax * scrollProgress;
    final double avatarLeftX = initialAvatarCenterX + horizontalShift;

    // Position vertically based on current header shrink
    final double currentHeaderBottomY = headerMaxExtent - currentShrinkOffset;
    // Use avatarSize.height / 2 for the current radius, as avatarSize reflects the scaled avatar
    final double avatarTopY = currentHeaderBottomY - (avatarSize.height / 2);

    avatar.position(Offset(avatarLeftX, avatarTopY));

    // The overall size of the CustomBoxy will be the size of the scrollable view
    return scrollableViewSize;
  }

  @override
  bool shouldRelayout(covariant _MyAvatarOverlayDelegate oldDelegate) {
    return oldDelegate.currentShrinkOffset != currentShrinkOffset ||
        oldDelegate.headerMaxExtent != headerMaxExtent ||
        oldDelegate.avatarRadius != avatarRadius ||
        oldDelegate.scrollProgress != scrollProgress;
  }
}

class _MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double myMaxExtent;
  final double myMinExtent;

  _MyHeaderDelegate({required this.myMaxExtent, required this.myMinExtent});

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    return Container(color: Colors.lightBlue);
  }

  @override
  double get maxExtent => myMaxExtent;

  @override
  double get minExtent => myMinExtent;

  @override
  bool shouldRebuild(covariant _MyHeaderDelegate oldDelegate) {
    return myMaxExtent != oldDelegate.maxExtent ||
        myMinExtent != oldDelegate.minExtent;
  }
}

And here is the result:

2025-05-31.16.23.54.mov