在flutter中添加容器底部的阴影?

问题描述 投票:5回答:4

我有一个简单的屏幕,有一个高度约为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)
                ),
              ],
            ),
          )
        ],
    );
  }
}

谁能帮我在我的蓝色容器的底部添加一个阴影或海拔?

请看下面的图片。enter image description here

先谢谢

flutter dart containers shadow box-shadow
4个回答
15
投票

你可以重用你堆栈中的第一个容器,这个容器有一个叫做decorate的属性,它接受一个BoxDecoration的小部件,你可以在这个链接中看到。BoxDecoration在这个widget里面,你可以使用boxShadow属性来给你的Container提供一个自定义的阴影,试试下面的代码。

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

14
投票

或者你可以用一个Material widget来包装你的Container widget 它包含了一个立面属性来赋予阴影效果。

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

图片。

enter image description here

两个widget之间的差异如上图所示。希望能帮到你!!!


7
投票

是的,BoxShadow可以解决这个问题,但是不需要手动添加BoxShadow的列表,而是在flutter中调用一个方便的map kElevationToShadow 将高程键映射到预定义的BoxShadow列表中。它也是基于 材料设计立面.

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

1
投票

使用容器阴影,如下图。

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

根据你的需要控制模糊半径和扩散半径。

© www.soinside.com 2019 - 2024. All rights reserved.