[Flutter] 带图标的Text - IconText

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

水平方向：

 

垂直方向效果：

 

 

 

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

import 'package:flutter/material.dart';

/// icon text
class IconText extends StatelessWidget {
  final String text;
  final Widget 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) {
    final _style = DefaultTextStyle.of(context).style.merge(style);
    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 : "\n$text"),
      ]),
      maxLines: maxLines,
      softWrap: softWrap ?? true,
      overflow: overflow ?? TextOverflow.clip,
      textAlign: textAlign ?? (direction == Axis.horizontal ? TextAlign.start : TextAlign.center),
    );
  }
}

 

 

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