如何制作不透明的背景？答案

【问题标题】：How to make an opaque background?如何制作不透明的背景？
【发布时间】：2022-08-02 19:48:37
【问题描述】：

所以基本上我正在尝试创建一个稍微不透明的容器。我正在使用.withOpacity(...); 方法但是我没有得到我想要的确切外观。我想要的外观是在 Apple Music 中：

灯光模式：

黑暗模式：

它就像它不是不透明的，而是像玻璃，有雾的玻璃。

编辑：这是我到目前为止所拥有的：

Widget opaqueContainer(BuildContext context) {
  final bool themeIsDark = true; // will use state manager here when implemented.
  return Container(
    height: 100,
    width: 100,
    color: themeIsDark ? Colors.black.withOpacity(0.7) : Colors.white.withOpacity(0.85),
    child: IconButton(
      onPressed: () {},
      icon: const Icon(CupertinoIcons.phone, color: primary),
    ),
  );
}

我怎样才能创造这种颜色？

请发布您目前拥有的现有代码。创造这种效果需要的不仅仅是颜色，而且很难在没有看到代码的情况下回答到底需要做什么:)
@RohanThacker 好的。更新。我真的没有多少。老实说，我认为这只是不透明哈哈。
它是目前流行的设计模式，“Glassmorphism”如果您想了解更多信息，请查看here 的更多信息

标签： flutter dart

【解决方案1】：

要创建上面的效果，您需要使用blur 效果和所需颜色的组合，blur 效果将为您提供雾状玻璃的外观和感觉。

在颤振中，您可以使用下面的BackdropFilter 小部件来模糊小部件后面的区域。

import 'dart:ui' as ui;
// Use ClipRect to contain the effect to the child's size. 
ClipRect(
      child: BackdropFilter(
        filter: ui.ImageFilter.blur(
          sigmaX: 2.5,
          sigmaY: 2.5,
        ),
        child: Container(
          height: 80,
          width: 320,
          color: themeIsDark
              ? Colors.black.withOpacity(0.7)
              : Colors.white.withOpacity(0.85),
          child: Center(
            child: Text("Hello Word"),
          ),
        ),
      ),
    );

这将为您提供类似于以下示例的输出。

注意：这是一个显示蓝色效果的最小示例，而不是上述设计的再现

文档

BackdropFilter Widget

ImageFilter Class

【讨论】：