Skip to content

Latest commit

 

History

History
203 lines (170 loc) · 14.2 KB

README.md

File metadata and controls

203 lines (170 loc) · 14.2 KB
Raw

📜 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)
Curtains Curtains.regal | Sensitivity sensitivity List<double> sensitivity
Curtains.instant Curtains.fancy | TextDirection textDirection TextDirection directionality
Curtains.elevated Curtains | 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 📜 Curtains Maybe supplying a DecorationImage
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

Side-kick companions, work great alone or employed above