在Flutter中为容器底部添加阴影？

Question

我有一个简单的屏幕，其中一个高度约为100且蓝色的容器。我想在容器底部添加阴影或高程。

以下是我的代码

import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';


void main() {
  runApp(new IncomeFragment());
}

class IncomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
        children: <Widget>[
          new Container(
            height: margin_100dp,
            color: colorPrimary,

          ),
          new Container(    //container to  overlay on top of blue container
            alignment: Alignment.topCenter,


            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                Text(
                    zero_amount,
                    style: TextStyle(color: white, fontSize: 40.0, fontWeight: FontWeight.bold)
                ),
              ],
            ),
          )
        ],
    );
  }
}

有人能帮我在我的蓝色容器底部添加阴影或高程吗？

请参见下面的图像。阴影应放置在红圈中。

先行致谢

- yoohoo

Answer 1

您可以重复使用在Stack中的第一个容器，该容器具有名为decoration的属性，并且接受一种名为BoxDecoration的小部件，您可以在此链接中查看：BoxDecoration。 在此小部件内，您可以使用boxShadow属性为容器添加自定义阴影，请尝试下面的代码：

new Container(
      height: margin_100dp,
      decoration: BoxDecoration(
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Colors.black54,
                blurRadius: 15.0,
                offset: Offset(0.0, 0.75)
            )
          ],
        color: colorPrimary
      ),
    ),

- Luis Miguel Mantilla

---

同时您可以使用卡片小部件。 - Vithani Ravi

它给我非常奇怪的输出。谢谢。 - Kamlesh

Answer 2

或者您可以将Container widget包装在一个Material widget中，该widget包含一个elevation属性，以产生阴影效果。

Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Material(
                elevation: 15.0,
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.blue,
                  child: Center(child: Text("Material",style: TextStyle(color: Colors.white),)),
                ),
              ),
              SizedBox(width: 100,),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                          color: Colors.black54,
                          blurRadius: 15.0,
                          offset: Offset(0.0, 0.75)
                      )
                    ],
                    color: Colors.blue
                ),
                child: Center(child: Text('Box Shadow',style: TextStyle(color: Colors.white))),
              ),
            ],
          ),
        ),

图片：

上面显示了两个小部件之间的区别。希望这能帮到你！

- Syangden DT

Answer 3

是的，BoxShadow可以解决这个问题，但是除了手动添加BoxShadow列表之外，在Flutter中还有一个方便的映射叫做kElevationToShadow，它将高程键映射到预定义的BoxShadow列表。它也基于Material Design高程定义。

Container(
  height: 60.0,
  decoration: BoxDecoration(
    boxShadow: kElevationToShadow[4],
    color: Theme.of(context).bottomAppBarColor,
  ),
  child: ...
);

- akp

Answer 4

Container(
   margin: EdgeInsets.only(bottom: 7),
   decoration: BoxDecoration(
     color: Colors.white,
     borderRadius: BorderRadius.circular(10),
     boxShadow: kElevationToShadow[2], // Use This kElevationToShadow ***********
   ),
   child: Center(child: Text('With BoxShadow')),
),

Material( // Using Material Widget ***********************
  elevation: 5,
  borderRadius: BorderRadius.circular(10),
  child: Container(
    margin: EdgeInsets.only(bottom: 7),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Center(child: Text('With BoxShadow')),
 ),
),

- Sumit

Answer 5

如果你想让一个容器只有上面有阴影

 boxShadow: [
      BoxShadow(
        color: Color.fromARGB(255, 218, 218, 218),
        blurRadius: 10.0, // soften the shadow
        spreadRadius: 0.0, //extend the shadow
        offset: Offset(
          0.0, // Move to right 10  horizontally
          -15.0, // Move to bottom 10 Vertically
        ),
      )
    ],

- Zia

Answer 6

您可以添加多个BoxShadow来显示所需的阴影，使用OffSet属性可以移动阴影。

boxShadow: [
             BoxShadow(
                 color: Colors.blue,
                 offset: Offset(0, 8), // hide shadow top
                 blurRadius: 5),
             BoxShadow(
               color: Colors.white,  // replace with color of container
               offset: Offset(-8, 0), // hide shadow right
             ),
             BoxShadow(
               color: Colors.white, // replace with color of container
               offset: Offset(8, 0), // hide shadow left
             ),
           ],

- Maik

Answer 7

使用以下代码作为容器阴影效果：

使用以下代码作为最初的回答：

decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(20.0, 10.0),
        blurRadius: 20.0,
        spreadRadius: 40.0,
      ),
    ], 
  ),

根据您的需求控制模糊半径和扩散半径

- Fethi

Answer 8

试试这个

boxShadow: <BoxShadow>[
                  BoxShadow(
                      color: Colors.black.withOpacity(.6),
                      blurRadius: 12.0,
                      spreadRadius: 6.0,
                      offset: Offset(
                        0,
                        10,
                      )),

- ALI USAMA