Flutter实现文本尾部添加跟随图标

一、需求

再一段文本的最后添加图标，图标紧贴文本末尾，随文本换行而换行。
效果图：

二、知识点

1、WidgetSpan

WidgetSpan在文本中内嵌固定大小Widget。

WidgetSpan({
    @required this.child,
    ui.PlaceholderAlignment alignment = ui.PlaceholderAlignment.bottom,//对齐方式 
    TextBaseline baseline,//基准线对齐
    TextStyle style,//文本样式
})

2、TextSpan

文本片段，html里有个span这里有个TextSpan，作用基本相同，文字放一行，text与children任选一样填写。
TextSpan与RichText配合使用可以实现不同样式文字布局。

TextSpan({
    this.text,
    this.children,//是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan
    TextStyle style,
    this.recognizer,//它是点击链接后的一个处理器,用于对该文本片段上用于手势进行识别处理,设定手势识别器
    this.semanticsLabel,
})

三、实现

这是用到了 Text.rich();来实现富文本显示文本片段。

Text.rich(
  TextSpan(
    style: TextStyle(
        fontSize: 20.sp, color: Colors.white),
    children: [
      TextSpan(text:'带你涨知识'),
      WidgetSpan(
        baseline: TextBaseline.ideographic,
        child: TopicEndIcon(
            size: 18,
         )，
      ),
    ],
  ),
),