模糊图像顶部的渐变颤动

问题描述

我希望实现一种与第二张屏幕截图中的背景类似的设计。因此，模糊的背景图像的上半部分已经很好，只有下半部分缺少固定颜色（例如黑色或白色）的渐变。

为澄清起见：我只希望背景淡化为黑色而不影响顶层（在这种情况下为未触摸的图像）。我现在已经尝试了很长时间才能找到合适的解决方案，但不幸的是我没有找到任何解决方案。

当前状态：

目标：

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

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),)),);

解决方法

您可以使用Stack和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',)
                ),)
        ),],);
  }
}

您可以调整颜色并停下来以完全按照所需的方式获得它。

最终结果：