Flutter实现背景图片透明度：问题求助及代码示例

我的项目：

预期效果：

我希望为背景图片设置透明度，尝试了多种解决方案，但均未达到预期效果。

现有代码：

Container(
  decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/zelij.jpg"),
        colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.4), BlendMode.dstATop),
        fit: BoxFit.cover,
      )
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    appBar: AppBar(
      toolbarHeight: 90,
      title: Image.asset("assets/logo.jpeg", width: 100, height: 100),
      centerTitle: true,
      backgroundColor: Colors.white,
      elevation: 0.1,
      shadowColor: Colors.grey.withOpacity(0.5),
      iconTheme: const IconThemeData(color: Colors.black),
    ),
    body: Column(
        children: [
          TextFormField()
        ],
      ) ,
  ),
);

你当前使用的BlendMode.dstATop混合模式逻辑不符合背景图透明的需求，以下两种方法可以实现预期效果：

方法一：调整ColorFilter的混合模式 #

将混合模式改为BlendMode.modulate，该模式会让颜色滤镜与图片像素做乘法运算，从而实现自然的透明效果：

Container(
  decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/zelij.jpg"),
        colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.modulate),
        fit: BoxFit.cover,
      )
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    appBar: AppBar(
      toolbarHeight: 90,
      title: Image.asset("assets/logo.jpeg", width: 100, height: 100),
      centerTitle: true,
      backgroundColor: Colors.white,
      elevation: 0.1,
      shadowColor: Colors.grey.withOpacity(0.5),
      iconTheme: const IconThemeData(color: Colors.black),
    ),
    body: Column(
        children: [
          TextFormField()
        ],
      ) ,
  ),
);

方法二：叠加半透明容器层 #

如果滤镜方式达不到预期，可以在背景图上方叠加一个全屏半透明容器，直观控制透明度：

Container(
  decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/zelij.jpg"),
        fit: BoxFit.cover,
      )
  ),
  child: Stack(
    children: [
      Container(
        color: Colors.black.withOpacity(0.4),
        width: double.infinity,
        height: double.infinity,
      ),
      Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          toolbarHeight: 90,
          title: Image.asset("assets/logo.jpeg", width: 100, height: 100),
          centerTitle: true,
          backgroundColor: Colors.white,
          elevation: 0.1,
          shadowColor: Colors.grey.withOpacity(0.5),
          iconTheme: const IconThemeData(color: Colors.black),
        ),
        body: Column(
            children: [
              TextFormField()
            ],
          ) ,
      ),
    ],
  ),
);

你可以根据实际显示效果选择其中一种方案。

内容的提问来源于stack exchange，提问作者Mustapha Roudani