Flutter 带icon的TextButton

Flutter 实现如下效果的TextButton

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

class TextIconButton extends StatelessWidget {
  const TextIconButton({
    Key? key,
    required this.onPressed,
    required this.textSpanText,
    this.backgroundColor,
    this.icon,
    this.iconColor,
    this.alignment
  }) : super(key: key);

  final VoidCallback onPressed;
  final String textSpanText;
  final MaterialStateProperty<Color>? backgroundColor;
  final IconData? icon;
  final PlaceholderAlignment? alignment;
  final Color? iconColor;

  @override
  Widget build(BuildContext context) {
    return TextButton(
        style: ButtonStyle(
            padding: MaterialStateProperty.all<EdgeInsets>(
                EdgeInsets.only(left: 10)),
            backgroundColor: backgroundColor ?? MaterialStateProperty.all<Color>(Colors.white)),
        onPressed: onPressed,
        child: Text.rich(
          TextSpan(
              style: TextStyle(color: Colors.black54, fontSize: 13),
              children: [
                TextSpan(
                  text: textSpanText,
                ),
                WidgetSpan(
                  child: Icon(icon, color: iconColor,),
                  alignment: alignment ?? PlaceholderAlignment.middle,
                ),
              ]),
        ));
  }
}

使用：

child: TextIconButton(
                      onPressed: showTaskTypeDialog,
                      textSpanText: '来源',
                      icon: Icons.arrow_drop_down,
                      iconColor: Colors.black54,
                    )),

效果