如何在flutter中创建像css这样的文本换行图像布局。

Question

我想让文字包裹热门标签，我该怎么办？

• 类型1：不对齐
• 类型2：不在一行
• 类型3：非常接近但没有设置填充和边距，我没有找到一些lineHeight属性等。

 var Infomation = Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                color: Colors.redAccent,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                margin: EdgeInsets.only(right: 10),
                child: Text("hot", style: TextStyle(color: Colors.white, fontSize: 20)),
              ),
              Expanded(child: Text("Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life", textScaleFactor: 1.5, maxLines: 2, overflow: TextOverflow.ellipsis))
            ],
          ),
          Wrap(
            direction: Axis.horizontal,
            crossAxisAlignment: WrapCrossAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.redAccent,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                margin: EdgeInsets.only(right: 10),
                child: Text("hot", style: TextStyle(color: Colors.white, fontSize: 20)),
              ),
              Text("Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life", textScaleFactor: 1.5, maxLines: 2, overflow: TextOverflow.ellipsis)
            ],
          ),
          RichText(
              textAlign: TextAlign.start,
              text: TextSpan(
                  text: "hot",
                  style: TextStyle(color: Colors.white, backgroundColor: Colors.red, fontSize: 24) ,
                  children: [
                    TextSpan(
                        text: "Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life",
                      style: TextStyle(
                        color: Colors.black,
                        backgroundColor: Colors.white,
                        fontSize: 18,
                      )
                    )
                  ]
              ),
              maxLines: 2
          )
        ],
      );

Answer 1

截图是在这里https://i.stack.imgur.com/5MpHV.png

我似乎没有足够的声望来使用图片。