如何在 Flutter 上设置自定义高程颜色? [英] How to set a custom elevation color on Flutter?

问题描述

我正在尝试自定义 RaisedButton 在颤动时阴影的颜色，例如绿色而不是灰色，我不想像互联网上的所有解决方案一样将按钮放在容器内，所以我希望有一个解决方案使用提升和android 材料"不可能做到这一点的旧答案不再是问题.

已编辑:使用ShadowBox解决方案的容器的问题是，由于偏移量只有两个值，垂直和水平，并且如果我们推动ShadowBox使其进入只有一侧，然后在一侧，但它会很大(按钮高度的一半)！

因此，如果有办法使子项(RaisedButton)大于容器，那将是一个解决方案.

我正在尝试使用 Stack(..Positioned(..)) 但到目前为止没有运气.

顺便说一句，这是我需要一个原生但彩色阴影的按钮.

RaisedButton(填充:EdgeInsets.symmetric(垂直:15.0)，形状:圆角矩形边框(边界半径:边界半径.圆形(30.0)),颜色:Theme.of(context).primaryColor,onPressed: () =>打印('你好')，孩子:中心(文本(...))，),

我只希望底部有一个与按钮颜色相同的阴影:

但到目前为止我得到了什么:

谢谢

解决方案

经过 2 年的更新，事情发生了变化.对于更新检查答案: https://stackoverflow.com/a/66638462/10380182p>

目前无法在 Flutter 中更改默认的高程颜色.在我看来，它不会是，因为 Material Design 原则.

创建一个包装器Container，然后用容器包装你的Button Widget(没有高度).

您可以随意调整 BoxShadow.您还可以使用半强度 Offset(1, 0) 向右侧和左侧添加额外的高度偏移量(-1, 0).

容器(例如蓝色):

class CustomElevation extends StatelessWidget {最后的小部件子；CustomElevation({@required this.child}) : assert(child != null);@覆盖小部件构建(BuildContext 上下文){返回容器(装饰:盒子装饰(盒子阴影:<盒子阴影>[盒子阴影(颜色:Colors.blue.withOpacity(0.1),模糊半径:1，偏移量:偏移量(0, 2)，),],),孩子:this.child，);}}

用例:

CustomElevation(孩子:平面按钮(颜色:颜色.蓝色，onPressed: () {},孩子:文本('自定义高程')，),)

对于 StadiumBorder 按钮:

我们为Container创建高度参数:

class CustomElevation extends StatelessWidget {最后的小部件子；最终双高；CustomElevation({@required this.child, @required this.height}):断言(孩子！=空)；@覆盖小部件构建(BuildContext 上下文){返回容器(高度:this.height，装饰:盒子装饰(边界半径:边界半径.all(半径.圆形(this.height/2))，盒子阴影:<盒子阴影>[盒子阴影(颜色:Colors.blue.withOpacity(0.2)，模糊半径:高度/5，偏移量:偏移量(0，高度/5)，),],),孩子:this.child，);}}

然后:

CustomElevation(身高:60，孩子:平面按钮(形状:体育场边界()，颜色:颜色.蓝色，onPressed: () {},孩子:文本('自定义高程')，),)

I am trying to customize the color of the RaisedButton's shadow on flutter, e.g Green instead of Grey, I don't want to put the button inside a Container like all solutions on the internet, so I hope that there's a solution using elevation and the old answer that this is not possible by "android material" is not an issue any more.

Edited: the problem with the container with ShadowBox solution is that will be Spread to all sides as the offset has two values only,vertical and horizontal, and if we push the ShadowBox to make it in one side only, then in one side BUT it's going to be big(half of the button height)!

So if there's a way to make the child(RaisedButton) bigger than the container then that would be a solution.

I am trying to use Stack(..Positioned(..)) but no luck so far.

BTW, this is the button that I need a native but colorful shadow for it.

RaisedButton(
   padding: EdgeInsets.symmetric(vertical: 15.0),
   shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(30.0)
   ),
   color: Theme.of(context).primaryColor,
   onPressed: () => print('Hello'),
   child: Center(Text(...)),
),  

I want a shadow at the bottom only with same color as the button:

but what I am getting so far:

thanks

解决方案

Edit: After 2 years of updates, things are changed. For the updates check the answer: https://stackoverflow.com/a/66638462/10380182

It is not possible to change default elevation color right now in Flutter. And in my opinion, it won't be, because of Material Design principles.

Create a wrapper Container then wrap your Button Widget(that has no elevation) with the Container.

You can tweak the BoxShadow however you want. Also you can add additional elevation to right and left side with half strength Offset(1, 0) & Offset(-1, 0).

Container(for blue color e.g.):

class CustomElevation extends StatelessWidget {
  final Widget child;

  CustomElevation({@required this.child}) : assert(child != null);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.blue.withOpacity(0.1),
            blurRadius: 1,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: this.child,
    );
  }
}

Usecase:

CustomElevation(
  child: FlatButton(
    color: Colors.blue,
    onPressed: () {},
    child: Text('Custom Elevation'),
  ),
)

Edit: For StadiumBorder buttons:

We create height parameter for the Container:

class CustomElevation extends StatelessWidget {
  final Widget child;
  final double height;

  CustomElevation({@required this.child, @required this.height})
      : assert(child != null);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(this.height / 2)),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.blue.withOpacity(0.2),
            blurRadius: height / 5,
            offset: Offset(0, height / 5),
          ),
        ],
      ),
      child: this.child,
    );
  }
}

then:

CustomElevation(
  height: 60,
  child: FlatButton(
    shape: StadiumBorder(),
    color: Colors.blue,
    onPressed: () {},
    child: Text('Custom Elevation'),
  ),
)

这篇关于如何在 Flutter 上设置自定义高程颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！