如何在颤动中制作渐变阴影按钮？

Question

我有那个按钮（底部的屏幕截图）。现在我想添加一个恒定的外部发光（发光是渐变阴影，取决于按钮）。除了在资产文件夹中将其另存为 .png 之外，还有另一种可能性吗？那会减少很多工作。谢谢！

Answer 1

您也可以尝试以下套餐gradient-widgets。

将其添加到pubspec

中的依赖项中

dependencies:
  gradient_widgets: ^0.5.1

然后，

import 'package:gradient_widgets/gradient_widgets.dart';

然后按如下方式使用它

 GradientButton(
  child: Text('Gradient'),
  callback: () {},
  gradient: Gradients.backToFuture,
  shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),

参考资料

Answer 2

您可以尝试这样的方法，使用容器框装饰属性，例如渐变、框阴影...

 Container(
    height: 50,
    width: 200,child:Text("Login",textAlign:TextAlign.center),
    decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment(0.8, 0.0),
          colors: [Colors.blue, Colors.indigo, Colors.indigo],
          tileMode: TileMode.repeated,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.indigo,
            blurRadius: 4.0,
            spreadRadius: 4.0, 
            offset: Offset(
              0.0,
              0.0,
            ),
          ),
        ]),
  ),

结果

Answer 3

Container(
          height: 50.0,
          child: RaisedButton(
            onPressed: () {},
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            padding: EdgeInsets.all(0.0),
            child: Ink(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xff374ABE),
                    Color(0xff851EDF),
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Container(
                constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
                alignment: Alignment.center,
                child: Text(
                  "Login",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ),

Answer 4

现在我通过修改BoxDecoration like this

解决了这个问题

如何在颤动中制作渐变阴影按钮？

How to make a gradient shadow button in flutter?

shadow

glow

flutter

参考资料