带有图标的颤动凸起按钮 - Dart

在Dart语言中，创建一个带有图标的颤动凸起按钮是非常容易的。在Flutter中，我们可以使用RaisedButton小部件来创建一个凸起按钮，使用Inkwell小部件来创建一个可触摸的波纹效果，使用Icon小部件来添加一个图标。

下面是一些示例代码，展示如何创建一个带有图标的颤动凸起按钮：

import 'package:flutter/material.dart';

class IconRaisedButton extends StatelessWidget {
  final IconData icon;
  final String label;
  final Function onPressed;

  IconRaisedButton({
    @required this.icon,
    @required this.label,
    @required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: onPressed,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
      child: SizedBox(
        width: double.infinity,
        height: 50.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: Colors.white,
            ),
            SizedBox(width: 10.0),
            Text(
              label,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              ),
            ),
          ],
        ),
      ),
      color: Colors.blue,
      textColor: Colors.white,
      padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
    );
  }
}

在这个例子中，我们创建了一个自定义的小部件IconRaisedButton，它有三个属性：icon、label和onPressed，分别代表图标、按钮文本和点击事件的回调函数。

我们使用RaisedButton来创建一个带有凸起效果的按钮，设置其点击回调函数和样式。我们使用Row来将图标和文本放在一起，使用SizedBox来限制按钮的宽度，并使用EdgeInsets来设置按钮的内边距。最后，我们设置了color和textColor属性，来将按钮的背景色和文本颜色设为蓝色和白色。

为了使按钮有一个可触摸的波纹效果，我们可以将RaisedButton包装在一个InkWell小部件中，像这样：

InkWell(
  onTap: onPressed,
  child: RaisedButton(
    ...
  ),
);

这样就可以在按钮上添加一个可触摸的波纹效果了。

使用我们自定义的IconRaisedButton小部件，我们可以轻松地创建一个带有图标的颤动凸起按钮，像这样：

IconRaisedButton(
  icon: Icons.email,
  label: 'Send Email',
  onPressed: () {},
);

这将创建一个带有邮件图标的按钮，并在点击时调用一个空函数。我们可以在onPressed属性中传递一个具体的函数，来实现具体的逻辑。

这就是如何在Dart中创建一个带有图标的颤动凸起按钮。这个例子只是一个简单的示例，你可以根据你的需要自定义你自己的按钮，包括颜色、样式、大小等等。让我们一起创造更好的用户界面吧！