带有图标和文本的颤动按钮 - Dart

在Flutter中，可以使用FlatButton组件来创建具有文本标签的按钮。不幸的是，FlatButton并不支持显示图标。为了在Flutter中实现带有图标和文本的按钮，可以使用InkWell和Padding组件来创建可点击的区域，并在其中包含图标和文本。

步骤

首先，在pubspec.yaml文件中添加需要的图标库。例如，要使用Material Design的Icons，可以添加以下代码到pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  material_design_icons_flutter: ^3.9.9

在Flutter应用程序中，要使用这些图标，需要引入它们。在你的代码中的顶部添加以下语句：

import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

创建一个新的自定义组件，以包含组合的InkWell和Padding，并在其中包含图标和文本。以下是可以使用的代码片段：

class IconButtonWithText extends StatelessWidget {
  final IconData icon;
  final String text;
  final VoidCallback onPressed;

  IconButtonWithText({this.icon, this.text, @required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Icon(
              icon,
              size: 35,
            ),
            SizedBox(height: 10),
            Text(text),
          ],
        ),
      ),
    );
  }
}

使用

使用IconButtonWithText自定义组件时，只需传递所需的图标，文本和回调函数即可。以下是如何在Flutter应用程序中使用这个自定义组件的一些示例：

IconButtonWithText(
  icon: MdiIcons.camera,
  text: '拍照',
  onPressed: () {
    // Do something when the button is pressed
  },
),

IconButtonWithText(
  icon: MdiIcons.image,
  text: '选择照片',
  onPressed: () {
    // Do something when the button is pressed
  },
),

IconButtonWithText(
  icon: MdiIcons.filePdf,
  text: '生成PDF',
  onPressed: () {
    // Do something when the button is pressed
  },
),

总结

在Flutter中创建带有图标和文本的带有颤动效果的按钮是相当简单的。只需要组合InkWell和Padding组件，并在其中包含图标和文本。创建一个自定义组件可以使这项工作更具可重用性和组织性。