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.
暫無相關資料。