Flutter中如何为图片列表添加渐变滤镜？

要给图片添加渐变滤镜，核心是通过Stack组件将图片与渐变层叠加，让渐变覆盖在图片指定区域。以下是具体实现方案：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("渐变滤镜图片列表")),
        body: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return _buildGradientImageItem();
          },
        ),
      ),
    );
  }

  Widget _buildGradientImageItem() {
    return Stack(
      fit: StackFit.expand,
      children: [
        // 基础图片
        Image.network(
          "https://picsum.photos/800/400?random=1",
          fit: BoxFit.cover,
          height: 200,
          width: double.infinity,
        ),
        // 渐变滤镜层
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              // 可根据需求调整渐变颜色与透明度
              colors: [
                Colors.transparent,
                Colors.black.withOpacity(0.7),
              ],
            ),
          ),
        ),
        // 可选：在渐变层上叠加文字（提升内容可读性）
        const Align(
          alignment: Alignment.bottomLeft,
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              "图片标题",
              style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ],
    );
  }
}

关键细节说明 #

• Stack布局：实现图片、渐变层、文字（可选）的层级叠加，确保渐变滤镜覆盖在图片上方。
• LinearGradient配置：
  • 通过begin和end控制渐变方向，示例为从上到下，若需左右渐变可改为Alignment.centerLeft到Alignment.centerRight。
  • colors数组定义渐变过渡色，示例从完全透明过渡到70%不透明度的黑色，可根据目标效果修改颜色、透明度及色值数量。
• 若需径向渐变效果，可替换LinearGradient为RadialGradient，调整中心点、半径等参数即可适配需求。

内容的提问来源于stack exchange，提问作者Sreerekha K V