How do you give a background color to a sheet so that when its pulled up it still covers the screens behind the sheet?

[mark8044]

First, Im liking what I see with this package. It seems to be moving the ball forward in the world of sheets and its appreciated.

In the basic examples (and in my own implementation) when the user pulls the sheet up, you can see the content behind the sheet which is quite ugly. For example, I am using ScrollableSheet:

Is there an easy (or proper) way to give the whole sheet a background color so that when being pulled up it will not reveal what is underneath.

The AI generator example video shows this effect:

[habibasseiss]

I've recently discovered this package and I really like it. Looks promising, congrats @fujidaiti!

I think the overscroll behavior could get some tweaking, especially the iOS 15 style. When the screen gets pulled up, I don't think it's a matter of giving the background a color, instead the physics could "attach" to the bottom to prevent showing the parent screen.

Also, Apple's implementation of overscroll at the top is much more limited. It doesn't get passed the top safe area.

[mark8044]

Yes having the bottom "attach" is the proper way forward, I used the term giving a background color as a way to mask that behavior so its not noticeable

[mark8044]

Here's what Ive done so far, and it seems to work, although it feels horribly wrong and hacky.

Fake it till you make it....

I wrapped my ScrollableSheet with a Stack and put a container with the fake background color of the Sheetcontent at the bottom, so that when you stretch the sheet you see that blank container and it 'feels' like its stretching

       final modalRoute = CupertinoModalSheetRoute(
          swipeDismissible: true, // Enable the swipe-to-dismiss behavior.
          builder: (context) {

            return Stack(
              children: [
                Align(alignment:Alignment.bottomCenter,child: Container(color: Colors.red, height:100)), /// <--- The fake covering

                ScrollableSheet(
                  physics: StretchingSheetPhysics(),
                    child:  ...

[fujidaiti]

Hi @mark8044,

Unfortunately, there is no standard API for creating a cover or something like a "skirt" at the bottom of a sheet to hide the content behind it.

Here's what Ive done so far, and it seems to work, although it feels horribly wrong and hacky.

I think this could be a workaround. Another option is to use OverflowBox, the points are: 1. wrap the main content of the sheet in a SheetContentScaffold and 2. stack the scaffold on top of an OverflowBox that has a greater height than the scaffold. If the background layer (OverflowBox) is sufficiently larger than the foreground layer (the scaffold), it will hide the content behind the sheet even if it is dragged beyond the screen boundaries, while keeping the draggable range limited by the main content height (plus some margin for the stretching effect). See the code below for more details.

This approach should work regardless of the maximum height of the sheet.

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

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

class _SheetWithSkirtExample extends StatelessWidget {
  const _SheetWithSkirtExample();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          return Scaffold(
            body: Center(
              child: ElevatedButton(
                onPressed: () {
                  _ModalSheet.show(context);
                },
                child: const Text('Show Sheet'),
              ),
            ),
          );
        },
      ),
    );
  }
}

class _ModalSheet extends StatelessWidget {
  const _ModalSheet();

  static void show(BuildContext context) {
    Navigator.push(
      context,
      ModalSheetRoute(
        swipeDismissible: true,
        builder: (_) => const _ModalSheet(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Primary layer, the main content (red).
    final primaryLayer = SheetContentScaffold(
      backgroundColor: Colors.red,
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );

    // Secondary layer (green). This layer has a greater height than
    // the primary layer, so that it can hide the background content
    // even if the sheet is dragged beyond the screen boundaries.
    final secondaryLayer = OverflowBox(
      // Align the top edges of the primary and secondary layers.
      alignment: Alignment.topCenter,
      minHeight: 1000, // Specify a greater value than the primary layer's height
      maxHeight: 1000,
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.green,
      ),
    );

    return SafeArea(
      bottom: false,
      child: ScrollableSheet(
        // Stack the scaffold on top of the OverflowBox.
        child: Stack(
          children: [
            secondaryLayer,
            primaryLayer,
          ],
        ),
      ),
    );
  }
}

RocketSim_Recording_iPhone_15_6.1_2024-06-05_03.59.19.mp4

[fujidaiti]

Adding rounded corners is a little bit tricky.

1. Wrap the main content in a ClipRect or something similar to clip the corners.

  Widget build(BuildContext context) {
    // Primary layer, the main content (red).
    final primaryLayer = ClipRRect(
      borderRadius: const BorderRadius.vertical(
        top: Radius.circular(20),
      ),
      child: SheetContentScaffold(

2. Add a top margin to the secondary layer equal to the corner radius. This is necessary because the ClipRect only clips the primary layer.

    final secondaryLayer = OverflowBox(
      alignment: Alignment.topCenter,
      minHeight: 1000, // Specify a greater value than the primary layer.
      maxHeight: 1000,
      child: Container(
        margin: const EdgeInsets.only(top: 20),

[fujidaiti]

Hi @habibasseiss,

When the screen gets pulled up, I don't think it's a matter of giving the background a color, instead the physics could "attach" to the bottom to prevent showing the parent screen.

Thanks for the suggestion! I agree with this idea and so I will add an option to StretchingSheetPhysics to limit the directions in which the sheet can stretch.

// Not working in the current version
DraggableSheet(
  physics: StretchingSheetPhysics(
  // This disables the stretching effect when overdragging upward
    direction: StretchingBehaviorDIrection.downward,
  ),
);

[fujidaiti]

#159

[fujidaiti]

As of v0.11.0, we can now use SheetSize.stretch on SheetDecoration to archive this visual effect. See this example for more details.

Sheet(
    decoration: MaterialSheetDecoration(
        size: SheetSize.stretch,
        ...,
    ),
);