Flutter：如何使小部件始终在阴影上方

Question

我有一个应用程序，其中包含两个容器，它们相互靠近/重叠，分别使用Row()/Column()小部件。这两个容器在其盒子装饰参数中都有投影效果。如果它们彼此接近，则位于顶部/左侧的一个会在另一个上投下阴影。

有没有一种方法可以使小部件不绘制阴影？

编辑：这是我的意思的示例。

我不希望第一个容器从第二个容器中产生阴影，而是希望两个容器都在阴影上方。

以下是此示例的代码：您可以将其复制粘贴到dartpad.dev进行快速测试。

import 'package:flutter/material.dart';

final Color darkBlue = Colors.grey[200]!;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              SizedBox(width: 20),
              Container(
                height: 100,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [BoxShadow(
                    blurRadius: 20,
                    color: Colors.black.withOpacity(0.6)
                  )]
                ),
              ),
              Container(
                height: 100,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [BoxShadow(
                    blurRadius: 20,
                    color: Colors.black
                  )]
                ),
              ),
            ]
          ),
        ),
      ),
    );
  }
}

- user15782390

---

你尝试过从他们的盒子装饰参数中移除阴影效果吗？ - Adnan

@Adnan，但是我希望它们有阴影。我想让方框有一个投影阴影，但我不想让投影阴影落在其他容器上。有没有办法实现这个？ - user15782390

请提供一些代码 - Adnan

@Adnan 只需要在一行中放置2个容器，它们都带有一个具有单个阴影的盒子装饰。 - user15782390

@Adnan 我已经更新了问题，其中包含代码和问题的截图。 - user15782390

Answer 1

如果它们都有自己的阴影，我想你无法实现你想要的目标。

另一种方法可能是将阴影赋予父元素，以下是示例代码：

import 'package:flutter/material.dart';

final Color darkBlue = Colors.grey[200]!;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(blurRadius: 20, color: Colors.black),
              ],
            ),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    height: 100,
                    width: 300,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(width: .2),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 100,
                    width: 300,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(width: .2),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我使用Expanded对它们进行了包装，以确保填充父级容器。

- Adnan

---

非常感谢您的帮助！不幸的是，这个方法行不通。我展示的代码只是一个例子，但在我的实际应用程序中，我有具有自己阴影的小部件，并且它们是有状态的小部件，所以它们会改变，因此我不能像您一样简单地包装它们。有没有办法确保我拥有的容器始终位于阴影之上？就像是否有一种属性或某种类型的小部件始终位于阴影之上或无法在其上绘制阴影？ - user15782390