模糊图像顶部的渐变（颤动）

Question

我想要一个像第二张截图中那样的带有褪色背景的设计。所以模糊背景图像的上半部分已经很好，只是下半部分缺少渐变到固定颜色（如黑色或白色）。

澄清一下：我只希望背景淡入黑色而不影响顶层（在本例中为未触及的图像）。我现在已经尝试了很长时间来找到合适的解决方案，但不幸的是我没有找到任何解决方案。

当前状态：

目标：

当前代码（第一个截图）：

Container(
 color: Colors.white,
 child: Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: CachedNetworkImageProvider(widget.storyData.coverURL),
      fit: BoxFit.cover,
    ),
  ),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
    child: Container(
      child: Padding(
        padding: const EdgeInsets.all(80.0),
        child: Hero(
          tag: widget.heroTagID,
          child: CachedNetworkImage(
            imageUrl: widget.storyData.coverURL,
            placeholder: (context, url) => Padding(
              padding: EdgeInsets.all(25),
              child: Icon(Ionicons.image_outline),
            ),
          ),
        ),
      ),
    ),
  )),
);

Answer 1

您可以使用 Stack and LinearGradient 来实现。

我已将 CachedNetworkImageProvider 替换为简单的 NetworkImage，以便代码可以在 https://dartpad.dev/ 上运行。原理不变：

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

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                'https://picsum.photos/id/255/1440/3200',
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
              color: Colors.white,
              gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [Colors.black.withOpacity(0.0), Colors.black],
                  stops: [0.0, 1.0]
              )
          ),
        ),
        BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(80.0),
                child: Hero(
                    tag: 'heroTag',
                    child: Image.network(
                      'https://picsum.photos/id/255/1440/3200',
                    )
                ),
              ),
            )
        ),
      ],
    );
  }
}

您可以调整颜色和档位以获得您想要的效果。

最终结果：

模糊图像顶部的渐变（颤动）

Gradient on top of blurred image (flutter)

flutter

dart

flutter-layout

gaussianblur