flutter pub add sliver_catalog基于插件公开信息、社区数据与项目使用情况整理的选型参考。
sliver_catalog 是一个 Flutter 包，提供经过精心挑选的实验性和创意性滑块，旨在增强可滚动界面。专为寻求独特且视觉上引人入胜的滚动体验的开发者设计，它扩展了 Flutter 内置的滑块组件，提供了创新的布局和行为。适用于原型设计或为具有复杂滚动交互的应用增添亮点，该包支持所有主要平台，包括移动、Web 和桌面。其模块化设计使其能够轻松集成到现有的滚动视图中。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A collection of experimental and creative slivers for Flutter. Extend your scrolling experience beyond the basics.
Sliver Catalog provides a set of advanced and experimental slivers for Flutter, enabling developers to create unique, visually engaging scroll effects. The package includes basic slivers as a platform for creating effects and specific implementations that provide ready-to-use effects.
A sliver that consumes a specified amount of scrollable space before allowing its child to start scrolling. This is useful for creating custom scroll-driven animations and effects.
Key features:
ValueListenable<double> progress (0.0–1.0) to the builder, so you can animate your child based on the progress.ScrollHijackProgressBehavior.Example:
CustomScrollView(
slivers: [
ScrollHijackSliver(
consumingSpaceSize: 800,
builder: (context, consumingProgress) {
return Container(
color: Colors.grey,
height: 300,
child: ValueListenableBuilder(
valueListenable: consumingProgress,
builder: (context, value, child) {
return CustomPaint(
painter: MyCustomPainter(progress: value),
);
},
),
);
},
),
// ... other slivers ...
],
)
A sliver that applies a fragment shader effect to its child as it leaves the viewport. This enables advanced visual effects as the user scrolls.
Key features:
FragmentShader that uses a specific order of arguments (size, offset, progress), or with a custom shader wrapper for any uniform order via the LeavingViewportShader interface.Example:
CustomScrollView(
slivers: [
// Using a raw FragmentShader (default uniform order)
LeavingViewportShaderSliver.fromFragmentShader(
shader: myFragmentShader,
child: Image.network('https://...'),
),
// Using a custom wrapper for arbitrary uniform order
LeavingViewportShaderSliver(
shader: MyCustomLeavingViewportShader(),
child: Image.network('https://...'),
),
// ... other slivers ...
],
)
There are also two built-in inheritances of LeavingViewportShaderSliver:
A sliver that applies a "freezing" shader effect to its child as it leaves the viewport. This effect is built-in and requires no manual shader setup.
Key features:
Example:
CustomScrollView(
slivers: [
FreezeSliver(
child: Image.network('https://...'),
),
// ... other slivers ...
],
)
A sliver that applies a "blood covering" shader effect to its child as it leaves the viewport. This effect is built-in and requires no manual shader setup.
Key features:
Example:
CustomScrollView(
slivers: [
BloodSliver(
child: Image.network('https://...'),
),
// ... other slivers ...
],
)
A base render sliver for creating scroll-driven 3D or 2D transformations as a child leaves the viewport. This class is intended for advanced use, enabling you to define custom transformation effects (such as rotation, scaling, skewing, etc.) based on scroll progress.
Key features:
performTransform method to define any transformation matrix based on child size and leaving progress.Usage:
To create a custom effect, extend LeavingViewportTransformedRenderSliver and implement performTransform.
Example:
class MyCustomTransformedSliver extends SingleChildRenderObjectWidget {
const MyCustomTransformedSliver({super.key, required super.child});
@override
RenderObject createRenderObject(BuildContext context) =>
_MyCustomTransformedRenderSliver();
}
class _MyCustomTransformedRenderSliver extends LeavingViewportTransformedRenderSliver {
@override
Matrix4? performTransform(Size childSize, double progress) {
// Scale pulsation: scale oscillates as the child leaves the viewport
final double scale = 1.0 - 0.2 * (math.sin(progress * math.pi * 4)).abs();
final Matrix4 matrix = Matrix4.identity();
matrix.translate(childSize.width / 2, childSize.height / 2);
matrix.scale(scale, scale);
matrix.translate(-childSize.width / 2, -childSize.height / 2);
return matrix;
}
}
There are also two built-in inheritances of LeavingViewportTransformedRenderSliver:
A sliver that rotates its child as it leaves the viewport. The rotation is anchored to a configurable side and the maximum angle can be customized.
Key features:
Example:
CustomScrollView(
slivers: [
SpinnerSliver(
anchorSide: SpinnerAnchorSide.left, // or SpinnerAnchorSide.right
maxAngle: math.pi / 2, // 90 degrees
child: Image.network('https://...'),
),
// ... other slivers ...
],
)
A sliver that smoothly slides its child left or right as it leaves the viewport, creating a gliding effect.
Key features:
Example:
CustomScrollView(
slivers: [
GliderSliver(
exitSide: GliderExitSide.left, // or GliderExitSide.right
child: Image.network('https://...'),
),
// ... other slivers ...
],
)
Mikhail Zotyev
We appreciate any form of support, whether it's a financial donation, a public sharing, or a star on GitHub and a like on Pub. If you want to provide financial support, there are several ways you can do it:
Thank you for all your support!
This project is licensed under the MIT License. See LICENSE for details.
暂无相关数据。