Flutter滚动阴影效果插件flutter_scroll_shadow的使用

Scroll Shadow

ScrollShadow 是一个Flutter小部件，为可滚动子组件添加阴影。

• 支持 ScrollController 和垂直或水平方向。
• 当滚动视图未达到最大范围时，添加阴影。
• 支持自定义动画持续时间。
• 确定阴影渲染的宽度或高度。

Features

• 在滚动视图未到达其最大范围时添加阴影
• 支持垂直和水平 Axis
• 可定制的动画持续时间
• 确定阴影渲染的宽度或高度

Usage

Installation

在 pubspec.yaml 文件中添加以下行：

dependencies:
  flutter_scroll_shadow: <last-release>

Basic Setup

下面是一个完整的示例，展示了如何设置垂直和水平滚动的阴影效果。

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:flutter_scroll_shadow/flutter_scroll_shadow.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'ScrollShadow Example',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('   Vertical                    |                    Horizontal'),
          centerTitle: true,
        ),
        body: Row(
          children: [
            // Vertically-scrolling child
            Expanded(
              child: ScrollShadow(
                color: Colors.grey,
                child: ListView(
                  scrollDirection: Axis.vertical,
                  children: List.generate(
                    15,
                    (index) => ListTile(title: Text('Element $index')),
                  ),
                ),
              ),
            ),

            // Horizontally-scrolling child
            Expanded(
              child: ScrollShadow(
                color: Colors.grey,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: List.generate(
                    5,
                    (index) => SizedBox(
                      width: 100,
                      child: RotatedBox(
                        quarterTurns: 1,
                        child: Text('Element $index'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
}

Properties

• color: 阴影颜色，默认为 Colors.grey
• size: 根据 Axis 决定阴影的宽度或高度，默认为 15.0
• child: 包含在 ScrollShadow 中的可滚动子组件
• duration: 阴影可见性变化的动画持续时间（以毫秒为单位），默认为 300
• fadeInCurve: 阴影出现的动画曲线，默认为 Curves.easeIn
• fadeOutCurve: 阴影消失的动画曲线，默认为 Curves.easeOut
• ignoreInteraction: 确定阴影是否被包裹在一个 IgnorePointer 小部件中，忽略所有触摸事件，默认为 true

示例

垂直滚动的子组件	水平滚动的子组件

通过以上内容，您可以轻松地在Flutter应用中实现滚动阴影效果。如果您有任何问题或需要进一步的帮助，请参考 GitHub上的例子 或访问 GitHub Issues 页面。