Flutter动态模糊滚动效果插件motion_blur_scrollable的使用

Flutter动态模糊滚动效果插件motion_blur_scrollable的使用

介绍

motion_blur_scrollable 是一个用于实现动态模糊滚动效果的 Flutter 插件。它基于 renancaraujo/motion_blur_scrollable 进行了修改并打包为独立包。

使用方法

要使用 motion_blur_scrollable，首先需要在你的项目中引入该插件。你可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  motion_blur_scrollable: ^版本号

然后运行 flutter pub get 来获取最新的依赖包。

接下来，你可以通过以下方式将 motion_blur_scrollable 应用到你的项目中：

MotionBlurScrollable(
    child: ListView.builder(
        ...
    ),
),

完整示例

以下是完整的示例代码，展示了如何在 Flutter 中使用 motion_blur_scrollable 插件来实现动态模糊滚动效果。

import 'package:flutter/material.dart';

import 'package:motion_blur_scrollable/motion_blur_scrollable.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const Scaffold(
        body: Content(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 600,
        child: MotionBlurScrollable(
          child: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              if (index % 5 == 0) {
                return const Title('Photos');
              }
              return RandomPhoto(
                key: ValueKey(index),
                index: index,
              );
            },
            itemCount: 100,
          ),
        ),
      ),
    );
  }
}

class RandomPhoto extends StatefulWidget {
  const RandomPhoto({
    super.key,
    required this.index,
  });

  final int index;

  [@override](/user/override)
  State<RandomPhoto> createState() => _RandomPhotoState();
}

class _RandomPhotoState extends State<RandomPhoto>
    with AutomaticKeepAliveClientMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    super.build(context);
    // 返回一个 4:3 比例的图片组件
    return AspectRatio(
      aspectRatio: 4 / 3,
      child: Image.network(
        'https://picsum.photos/seed/${widget.index}/800/600',
      ),
    );
  }

  [@override](/user/override)
  bool get wantKeepAlive => true;
}

class Title extends StatelessWidget {
  const Title(this.title, {super.key});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final style = Theme.of(context).textTheme.titleMedium!.copyWith(
          fontWeight: FontWeight.w900,
          letterSpacing: 2,
        );

    // 返回一个带有标题的 Padding 组件
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 16),
      child: Text(
        title,
        style: style,
      ),
    );
  }
}