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

【问题标题】：How to make a gradient shadow button in flutter?如何在颤动中制作渐变阴影按钮？
【发布时间】：2020-05-01 03:19:27
【问题描述】：

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

【问题讨论】：

你好。欢迎来到 StackOverflow。请确保您共享您的代码，以便用户可以帮助您。查看问题指南：stackoverflow.com/help/how-to-ask
@Argen 这可能会帮助你medium.com/jlouage/…

【解决方案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),
),

参考文献

【讨论】：

【解决方案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,
            ),
          ),
        ]),
  ),

结果

【讨论】：

【解决方案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,
                  ),
                ),
              ),
            ),
          ),
        ),

【讨论】：

【解决方案4】：

现在我通过像this一样修改BoxDecoration来解决这个问题

【讨论】：