[Flutter] 带图标的Text

先看下效果图（框起来的地方）

水平方向：

垂直方向效果：

 

我们经常需要这样的效果，文字前面或上方加上图标。

import 'package:flutter/material.dart';

/// icon text
class IconText extends StatelessWidget {
  final String text;
  final Icon icon;
  final double iconSize;
  final Axis direction;
  /// icon padding
  final EdgeInsetsGeometry padding;
  final TextStyle style;
  final int maxLines;
  final bool softWrap;
  final TextOverflow overflow;
  final TextAlign textAlign;

  const IconText(this.text,
      {Key key,
      this.icon,
      this.iconSize,
      this.direction = Axis.horizontal,
      this.style,
      this.maxLines,
      this.softWrap,
      this.padding,
      this.textAlign,
      this.overflow = TextOverflow.ellipsis})
      : assert(direction != null),
        assert(overflow != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return icon == null
        ? Text(text ?? '', style: style)
        : text == null || text.isEmpty
            ? (padding == null ? icon : Padding(padding: padding, child: icon))
            : RichText(
                text: TextSpan(style: style, children: [
                  WidgetSpan(
                      child: IconTheme(
                    data: IconThemeData(
                        size: iconSize ??
                            (style == null || style.fontSize == null
                                ? 16
                                : style.fontSize + 1),
                        color: style == null ? null : style.color),
                    child: padding == null
                        ? icon
                        : Padding(
                            padding: padding,
                            child: icon,
                          ),
                  )),
                  TextSpan(
                      text: direction == Axis.horizontal ? text : "
$text"),
                ]),
                maxLines: maxLines,
                softWrap: softWrap ?? true,
                overflow: overflow ?? TextOverflow.clip,
                textAlign: textAlign ?? (direction == Axis.horizontal ? TextAlign.start : TextAlign.center),
              );
  }
}

用方和 Text 类似，只是加了些属性。