curtains 0.10.0
curtains: ^0.10.0 copied to clipboard

Super simple scrim Curtains, or shadow decorations, by wrapping a scrollable child, alluding to unrevealed content while not at the start or end.

📜 Curtains #

pub.dev Listing | API Doc | GitHub #

API References: Curtains | Sensitivity | đŸ‘Ĩ package:shadows: 🕴 Elevation


Wrap a scrollable with scrim 📜 Curtains while not at the start or end, alluding to unrevealed content.



There has been a breaking change from [0.9.4+1] to [0.9.5], but it is quite easily fixed.
Package still in pre-release.

A few other small changes have been made that may require minor cleanup
if moving to this version from an older one.

[0.10.0] (now)

âŦ…ī¸

[0.9.4+1] (before)

|

[0.10.0] (now)

âŦ…ī¸

[0.9.4+1] (before)

CurtainsCurtains.regal|Sensitivity sensitivityList<double> sensitivity
Curtains.instantCurtains.fancy|TextDirection textDirectionTextDirection directionality
Curtains.elevatedCurtains|bool endInitVisible
⭐
bool endCurtainInitVisible

⭐ Also now available is bool startInitVisible.


Furthermore either startCurtain or endCurtain now accepts a more abstract Decoration?
as opposed to a restriction to BoxDecoration?.


📚 Table of Contents #

đŸ§Ģ Examples #

See demonstrations of this Flutter package:

Elevated 📜 Curtains #

In lieu of Decorations, provide a simple number-based elevation. Optionally provide a color or specify duration.

final curtains = Curtains.elevated(
  child: ListView(
    children: List.generate(
      25,
      (i) => ListTile(title: Text('ListTile #: ${i+1}')),
    ),
  ),
  elevation: 24.0 // optional, defaults to `9.0`
  // Optional color; will maintain Material elevation opacities.✝
  color: Colors.red
);

It's that easy! #

✝ đŸ‘Ĩ Shadows - See: Elevation.asBoxShadows

 

Instant 📜 Curtains #

Special Curtains that offer no animation support.
No AnimationControllers were hurt in the making of this widget.

final curtains = Curtains.instant(
  /// 🕴 Default constructor 📜 [Curtains] employs `Elevation.asBoxDecoration` to
  /// render its decorations; but feel free to use these static methods, too,
  /// if you opt for đŸ‘Ĩ [package:shadows].
  startCurtain: const BoxDecoration(. . .) // Elevation.asBoxDecoration(12.0), // 🕴
  endCurtain: BoxDecoration(boxShadow: Elevation.asBoxShadows(12.0)), // 🕴
  child: ListView(
    children: List.generate(
      25,
      (i) => ListTile(title: Text('ListTile #${i+1}')),
    ),
  ),
);

It's similarly easy! #

 

Animated 📜 Curtains #

Each curtain may be customized independently. The spread parameter provides "girth," either width or height depending on axis, to allow the application of Decoration images, gradients, and fills.

Without spread, the only truly valid form of scrim curtain is the List<BoxShadow> from BoxDecoration, ShapeDecoration, etc.

This instance of 📜 Curtains has
custom, animated BoxDecorations
as well as sensitivity at the start
and end
.
BoxDecoration buildCurtain({bool isStart = true}) => BoxDecoration(
  gradient: LinearGradient(
    colors: [Colors.green[400]!, Colors.green[400]!.withOpacity(0)],
    begin: (isStart) ? Alignment.centerLeft : Alignment.centerRight,
    end: (isStart) ? Alignment.centerRight : Alignment.centerLeft,
  ),
  boxShadow: const [
    BoxShadow(color: Color(0x22FF0000), spreadRadius: 0.0, blurRadius: 5.0),
    BoxShadow(color: Color(0x66FF0000), spreadRadius: 10.0, blurRadius: 30.0),
    BoxShadow(color: Color(0x22FF0000), spreadRadius: 60.0, blurRadius: 150.0),
  ],
);

final curtains = Curtains(
  startCurtain: buildCurtain(),
  endCurtain: buildCurtain(isStart: false),
  // Provide `spread` to [Curtains] for decoration support beyond [BoxShadow]s.
  // (Gives "girth" to individual curtains; otherwise `0`.)
  spread: 50.0,
  // `start` appears once scrolled `350` px beyond min extent
  // `end` appears once scrolled `175` px beyond (before) max extent
  sensitivity: const Sensitivity.only(start: 350.0, end: 175.0),
  // 📜 Curtains are animated:
  duration: const Duration(milliseconds: 600),
  curve: Curves.fastOutSlowIn,
  // ↔ If wrapping a horizontal scrollable, initialize here, too:
  scrollDirection: Axis.horizontal, // ↔
  child: ListView(
    scrollDirection: Axis.horizontal, // ↔
    itemExtent: 100.0,
    children: List.generate(
      25,
      (i) => ListTile(title: Text('ListTile #${i+1}')),
    ),
  ),
);

But look here, and we can get pretty complex and creative. #

Notice the spread initialization for gradient support. #


📖 Reference #

Peruse the 📜 Curtains pub.dev documention for a full breakdown.

  • This is simple package to use, but it is also a package that was easy to implement.
    • It is, however, overly documented so that any beginners may learn from its code.
    • Utilizes a simple NotificationListener in lieu of ScrollController, which were both elusive when starting Flutter.

🕴 Elevation #

The Elevation paradigm is handled by đŸ‘Ĩ package:shadows

Any Decoration #

images of curtains as 📜 CurtainsMaybe supplying a DecorationImage <br/>is what you need?
Or consider something with a shape by using a ShapeDecoration
for the curtain decoration field.

🐞 Bugs #

One known bug:

  1. Even with Curtains.spread set non-negligibly, BoxDecoration.backgroundBlendMode does not work correctly.


🐸 Zaba.app ― simple packages, simple names. #

More by Zaba

Widgets to wrap other widgets #


Container widget that wraps many functionalities #


Non-square IconToo + ext. IconUtils on Icon #

  • 🙋‍♂ī¸ icon #


Side-kick companions, work great alone & employed above #

5
likes
120
pub points
25%
popularity

Publisher

zaba.app

Super simple scrim Curtains, or shadow decorations, by wrapping a scrollable child, alluding to unrevealed content while not at the start or end.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, shadows

More

Packages that depend on curtains