This is my ListWheelScrollView:

ListWheelScrollView.useDelegate(
                    overAndUnderCenterOpacity: 0.2,
                    controller: scrollController,
                    physics: const NeverScrollableScrollPhysics(),
                    itemExtent: 50,
                    perspective: 0.003,
                    diameterRatio: 1.5,
                    childDelegate: ListWheelChildLoopingListDelegate(
                      children: dateIdeas.map((idea) {
                        return Center(
                          child: Text(
                            idea,
                            style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  );

I'm trying to figure out how I can add a blurring effect to the text that's over and under the center item.

I've tried using a ImageFiltered widget on the text but that obviously blurs all items in the list. I'm not sure how I would apply this to just the top and bottom items.

Any help would be greatly appreciated. Thank You!

This is my ListWheelScrollView:

ListWheelScrollView.useDelegate(
                    overAndUnderCenterOpacity: 0.2,
                    controller: scrollController,
                    physics: const NeverScrollableScrollPhysics(),
                    itemExtent: 50,
                    perspective: 0.003,
                    diameterRatio: 1.5,
                    childDelegate: ListWheelChildLoopingListDelegate(
                      children: dateIdeas.map((idea) {
                        return Center(
                          child: Text(
                            idea,
                            style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  );

I'm trying to figure out how I can add a blurring effect to the text that's over and under the center item.

I've tried using a ImageFiltered widget on the text but that obviously blurs all items in the list. I'm not sure how I would apply this to just the top and bottom items.

Any help would be greatly appreciated. Thank You!

• flutter
• dart

1 Answer 1

The solution could be blur the entire area about and below the box instead of the items

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

main() {
  runApp(const ScrollApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Scroll'),
        ),
        body: const ScrollWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300.0,
      child: ScrollBlur(
        centerHeight: 50.0,
        child: ListWheelScrollView(
          overAndUnderCenterOpacity: 0.5,
          itemExtent: 50,
          diameterRatio: 1.5,
          children: [
            for (int index = 0; index < 4; index++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Center(
                    child: Text(
                      "idea $index",
                      style: const TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              )
          ],
        ),
      ),
    );
  }
}

class ScrollBlur extends StatelessWidget {
  const ScrollBlur({super.key, required this.centerHeight, required this.child});
  final double centerHeight;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        ClipPath(
          clipper: MyClipper(
            centerHeight: centerHeight,
          ),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            child: const SizedBox.expand(),
          ),
        ),
      ],
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  const MyClipper({required this.centerHeight});
  final double centerHeight;

  @override
  Path getClip(Size size) {
    final double centerStart = size.height / 2 - centerHeight / 2;
    final double centerEnd = size.height / 2 + centerHeight / 2;
    return Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, centerStart)
      ..lineTo(0.0, centerStart)
      ..close()
      ..moveTo(0.0, centerEnd)
      ..lineTo(size.width, centerEnd)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..close();
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

There is a bug in ListWheelScrollView #96427 that prevent child with filter to be rendered correctly. So the filter couldn't be apply to the item directly.