如何为Flutter中的TextButton添加双色渐变效果？

TextButton自带的styleFrom方法里的backgroundColor仅支持单一颜色，没法直接设置渐变。要实现双色渐变效果，最省事的方式是用Container包裹TextButton，给Container加渐变背景，同时把TextButton的背景设为透明，并且保持两者圆角一致。

修改后的代码示例如下：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    gradient: const LinearGradient(
      // 设置双色渐变方向和颜色
      colors: [Colors.blue, Colors.deepPurple],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
  ),
  child: TextButton.icon(
    style: TextButton.styleFrom(
      backgroundColor: Colors.transparent, // 让TextButton背景透明
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0), // 和Container圆角匹配
      ),
    ),
    onPressed: () {},
    label: const ListTile(
      title: Text("智能锁"),
      subtitle: Text("帮你开关门锁"),
    ),
  ),
)

这种方法既能实现双色渐变的视觉效果，又能保留TextButton原本的交互特性，比如点击时的水波纹反馈。

内容的提问来源于stack exchange，提问作者Tony