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

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 将它们都包裹起来，以确保填充父级。