如何在 Wrap Flutter 中从同一行开始文本

Question

我想设计一个小部件，其开头有一个图标，结尾有一个长文本。

当我将它们包装在Row小部件中时，我得到以下结果，因为 Row 不支持多行：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(Icons.face),
        Text(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          maxLines: 5,
        ),
      ],
    );
  }
}

但是当我将它们包装在Wrap小部件中时，我克服了溢出问题，但是，由于 是与Text不同的小部件Icon，它从第二行开始，如下所示：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Icon(Icons.face),
        Text(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          maxLines: 5,
        ),
      ],
    );
  }
}

我怎样才能达到如下所示的照片的结果（显然是经过Photoshop处理的）：

Answer 1

使用RichText

import 'dart:ui';
import 'dart:ui' as ui show PlaceholderAlignment;

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(appBar: AppBar(), body: MyWidget()),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      maxLines: 5,
      text: TextSpan(children: [
        WidgetSpan(
          alignment: ui.PlaceholderAlignment.middle,
          child: Icon(Icons.face),
        ),
        TextSpan(
          text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ]),
    );
  }
}