嘿，刚好我之前做项目时碰到过一模一样的需求，用你当前的Flutter 3.24.0和shimmer ^3.0.0版本完全能轻松实现！

你之前的写法问题在于：把渐变效果放在了Shimmer的child容器里，但Shimmer.fromColors会直接替换child的颜色渲染，不仅覆盖了你设置的渐变，还把高亮效果固定成了纯色。要实现“黑色背景+渐变闪烁移动”的效果，核心是让Shimmer的闪烁层本身是渐变，而非给child加渐变。

具体解决方案：用Shimmer.fromGradient构造函数 #

shimmer 3.0.0版本新增了Shimmer.fromGradient，专门用来实现渐变闪烁效果，完美匹配你的需求：

• 把baseColor设为黑色（和背景色一致，确保非闪烁区域显示黑色）
• 把shimmerGradient设置成你想要的粉橙渐变
• 外层可以套一个黑色背景的容器，确保整个区域都是黑色

下面是完整的可运行代码示例：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '渐变Shimmer演示',
      theme: ThemeData.dark(),
      home: const Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: GradientShimmerCard(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromGradient(
      // 基础色和背景色一致，确保静止时显示黑色
      baseColor: Colors.black,
      // 闪烁移动的渐变效果
      shimmerGradient: const LinearGradient(
        colors: [
          Color(0xffD52FB0),
          Color(0xffE25279),
          Color(0xffF0793B),
        ],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
      ),
      // 闪烁周期
      period: const Duration(seconds: 2),
      child: Container(
        height: 500,
        width: 200,
        // 容器本身设为黑色，和baseColor保持一致
        color: Colors.black,
      ),
    );
  }
}

效果说明 #

运行这段代码后，你会看到：

• 整个页面背景是纯黑色
• 中间的200x500区域会有一个从左到右缓慢移动的粉橙渐变闪烁效果，完全符合你的需求

额外提示 #

如果你的Shimmer需要覆盖更复杂的占位布局（比如多个文本、图片的占位框），只需要把这些占位组件放在Shimmer.fromGradient的child里即可，只要确保这些占位组件的颜色和baseColor（黑色）一致，就能保证静止时显示黑色，闪烁时出现渐变效果。

内容来源于stack exchange