水平列表视图 flutter 的模糊边缘

Question

I want to blur the right and left edges of horizontal ListView. Now all I got is this:

Could it be done?

Answer 1

It can be done in few ways:

• Using Stack with 3 Positioned widgets(left blur with defined width with z=1, your full-width list with z = 0, right blur with defined width and z=1)
• Using ShaderMask

I will propose an example code for the second approach. This is how your BlurredHorizontalListView build method might look like:

@override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: ShaderMask(
        shaderCallback: (Rect bounds) {
          return LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              Colors.transparent,
              Colors.white,
              Colors.transparent
            ],
          ).createShader(bounds);
        },
        blendMode: BlendMode.dstIn,
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            
            return Card(
              child: Container(
                width: 220,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Image.network(
                      YOUR_URL,
                      height: 190,
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
            );
          },
          scrollDirection: Axis.horizontal,
          itemCount: 3,
        ),
      ),
    );
  }

Parts of the example are hardcoded, so feel free to adjust it by your needs.