在颤动的容器底部添加阴影？ [英] Adding Shadows at the bottom of a container in flutter?

问题描述

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

I have a simple screen with a container about 100 in height and with blue color. I want to add a shadow or elevation at the bottom of the container.

这是我的下面的代码

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

有人可以帮我添加一个蓝色容器底部的阴影或高程？

can someone help me to add a shadow or elevation at the bottom of my blue container?

请参见下图。阴影应该在红色圆圈中

see image below. shawdow should be in place in the red circle

预先感谢

推荐答案

您可以重复使用堆栈中的第一个容器，该容器具有一个称为decoration的属性，并且可以接受BoxDecoration类型的小部件。在此链接中查看： BoxDecoration
在此小部件内，您可以使用boxShadow属性为您的容器提供自定义阴影，请尝试以下代码：

You can reuse the first container that you have in your Stack, the container has a property called decoration and it accept a widget of kind BoxDecoration, as you can see in this link: BoxDecoration Inside this widget you can use the boxShadow property to give to your container a custom shadow, try the next code:

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

这篇关于在颤动的容器底部添加阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！