我目前依赖于flashscreen 1.2.0包的 flutter 应用程序。但是backgroundimage变量类型是imageprovider，而我想使用资产文件夹中的图像。有谁知道如何传递图像资产文件以用作imageprovider类型或任何其他方式使其工作？

原因是使用imageprovider与其他属性相比，它只是稍晚加载。

非常感谢！

我试过使用 Image.asset() 但没有用。

return SplashScreen(
    seconds: 5,
    navigateAfterSeconds: AppRoute,
    title: Text('Welcome', style: AppTextStyle),
    image: Image.asset(AppAsset.logo),
    photoSize: AppScreen,
    imageBackground: Image.asset(AppAsset.background),
    loaderColor: AppColor,
    loadingText: Text('Loading'),
    styleTextUnderTheLoader: AppTextStyle,
    onClick: () {},
 );

预计能够使用 Image.assets 但它仅适用于网络图像。

如何将整页渐变置于图像之上？

我希望达到的目标：

我试过的：

我尝试了一个带有两个堆叠 BackdropFilter 的容器，但这似乎不起作用。

class HomePage extends StatelessWidget {
  // Color gradientStart = Colors.transparent;
  // Color gradientEnd = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [gradientStart, gradientEnd],
            begin: FractionalOffset(0, 0),
            end: FractionalOffset(0, 1),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp
          ),
          // child: BackdropFilter()
          // image: DecorationImage(
          //   image: ExactAssetImage('assets/images/screen-1.jpg'),
          //   fit: BoxFit.cover,
          // ),
        ),
        child: Column(
            children: [
              Expanded(
                child: Container(
                  child: Align(
                    alignment: FractionalOffset(0.5, 0.0),
                    child: Container(
                      margin: EdgeInsets.only(top: …

我正在尝试创建一个漂亮的线性渐变，在卡片图像的底部添加阴影。

我希望这张卡有圆角，但是当我应用 ShaderMask 时，线性渐变的底部是黑色的，它占据了容器的整个空间（即容器有圆角，但着色器的底部黑色部分）蒙版创建直角）。

看图片：

这是代码：

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

class ProfileCard extends StatelessWidget {
  final String imageName;
  final String title;

  ProfileCard({this.imageName, this.title});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        ShaderMask(
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.transparent, Colors.black],
            ).createShader(bounds);
          },
          blendMode: BlendMode.darken,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              image: DecorationImage(
                image: AssetImage('assets/images/$imageName.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

左上角和右上角都可以，因为渐变的上端部分是透明的。

请注意，堆栈还有其他子级；我只是删除了它们以使代码更具可读性。我还尝试将堆栈包装在容器内并将 borderRadius 应用于该容器，但它不起作用。

如何同时在容器背景图像和圆角上拥有这种漂亮的渐变？

有没有一种方法可以使图像逐渐淡出底部？因此，图像底部的透明度为0。

我需要图像是透明的，不能使用堆栈在底部用颜色覆盖图像，因为我不知道图像的底下是什么。

这是我的形象

            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.dstATop),
                  image: NetworkImage(
                    routine.thumbnail
                  )
                )
              ),
            )

我不能这样做：

        background: Stack(
          alignment: AlignmentDirectional.bottomCenter,                        
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    routine.thumbnail,
                  )
                )
              ),
            ),
            Container(
              width: 1000,
              height: 100,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Colors.transparent,
                    someColor // I don't know what Color this will be, so I can't use this
                  ]
                )
              ),
            ),
          ]
        ),