Flutter渐变滚动效果插件fading_scroll的使用

Flutter渐变滚动效果插件fading_scroll的使用

快速入门

首先，将 fading_scroll 添加到你的 pubspec.yaml 文件中。

flutter pub add fading_scroll

然后，你可以使用 FadingScroll 包裹你的可滚动内容，并传递一个 ScrollController 给你的滚动组件。

[@override](/user/override)
Widget build(BuildContext context) {
    return FadingScroll(
        builder: (context, controller) {
            return ListView(
                controller: controller,
                children: [
                    // 这里可以添加你的滚动内容
                ],
            ),
        },
    );
}

使用方法

自定义渐变大小和滚动阈值

你可以通过提供自定义的滚动范围和渐变大小来定制效果。

[@override](/user/override)
Widget build(BuildContext context) {
    return FadingScroll(
        fadingSize: 100, // 渐变区域的高度
        scrollExtent: 120, // 滚动阈值
        builder: (context, controller) {
            return ListView(
                controller: controller,
                children: [
                    // 这里可以添加你的滚动内容
                ],
            ),
        },
    );
}

使用不同的控制器

你还可以提供自己的 ScrollController 给 FadingScroll。这在使用子类控制器（如 PageController）时非常有用。

class _State_ extends State<Example> {
  late final pageController = PageController();

  [@override](/user/override)
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FadingScroll(
      controller: pageController,
      builder: (context, controller) {
        return PageView(
          controller: pageController,
          children: [
              // 这里可以添加你的滚动内容
          ],
        );
      },
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用 fading_scroll 插件实现不同的滚动效果。

import 'package:fading_scroll/fading_scroll.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'Fading Scroll',
      home: HomePage(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fading Scroll'),
      ),
      body: ListView(
        children: [
          ...const <ExampleWidget>[
            VerticalListViewExample(),
            PageViewExample(),
            MixedViewExample(),
          ].map(
            (example) => ListTile(
              title: Text(example.title),
              onTap: () async {
                await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Scaffold(
                      appBar: AppBar(
                        title: Text(example.title),
                      ),
                      body: example,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

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

  String get title;
}

class VerticalListViewExample extends ExampleWidget {
  const VerticalListViewExample({
    super.key,
    this.startColor = const Color(0xFFFF1FCE),
    this.endColor = const Color(0xFFFFBB11),
  });

  final Color startColor;
  final Color endColor;

  [@override](/user/override)
  String get title => 'Vertical ListView';

  [@override](/user/override)
  State<VerticalListViewExample> createState() => _VerticalListViewExampleState();
}

class _VerticalListViewExampleState extends State<VerticalListViewExample>
    with AutomaticKeepAliveClientMixin<VerticalListViewExample> {
  [@override](/user/override)
  bool get wantKeepAlive => true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    super.build(context);
    return FadingScroll(
      fadingSize: 200,
      builder: (context, controller) {
        return ListView(
          controller: controller,
          children: [
            for (var i = 0; i < 100; i++)
              Card(
                child: ListTile(
                  leading: Container(
                    width: 32,
                    height: 32,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: Color.lerp(
                        widget.startColor,
                        widget.endColor,
                        i / 100.0,
                      ),
                    ),
                  ),
                  title: Text('Color $i'),
                ),
              ),
          ],
        );
      },
    );
  }
}

class PageViewExample extends ExampleWidget {
  const PageViewExample({
    super.key,
  });
  [@override](/user/override)
  String get title => 'PageView';

  [@override](/user/override)
  State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  late final PageController controller = PageController();

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FadingScroll(
      controller: controller,
      builder: (context, controller) {
        return PageView(
          controller: this.controller,
          children: [
            for (var i = 0; i < 6; i++)
              Card(
                child: ListView(
                  children: [
                    Container(
                      height: 200,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: Color.lerp(
                          const Color(0xFFFF1FCE),
                          const Color(0xFFFFBB11),
                          i / 6.0,
                        ),
                      ),
                    ),
                    Text(
                      'Color $i',
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
                  ],
                ),
              ),
          ],
        );
      },
    );
  }
}

class MixedViewExample extends ExampleWidget {
  const MixedViewExample({
    super.key,
  });
  [@override](/user/override)
  String get title => 'Mixed Example';

  [@override](/user/override)
  State<MixedViewExample> createState() => _MixedViewExampleState();
}

class _MixedViewExampleState extends State<MixedViewExample> {
  late final PageController controller = PageController();

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FadingScroll(
      fadingSize: 100,
      controller: controller,
      builder: (context, controller) {
        return PageView(
          controller: this.controller,
          children: [
            for (var i = 0; i < 6; i++) const VerticalListViewExample(),
          ],
        );
      },
    );
  }
}