Flutter - 如何在一行中显示文本和图标？

Question

I am using row widget with three child widgets: Text Icon Text

I want all of them to appear in single line same level horizontally and drop to new line if text increases.

I am using below code for Row widget but last Text widget is not aligned correctly

The text dropping should start below the " Tap " and " on the right hand " is not aligned

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text(
      'Tap ',
      style: TextStyle(
        fontSize: 17,
      ),
    ),
    Icon(Icons.add),
    Expanded(
      child: Text(
        'on the right hand corner to start a new chat.',
        style: TextStyle(
          fontSize: 17,
        ),
      ),
    )
  ],
)

Answer 1

Use Text.rich with WidgetSpan to put icon inside text (inline)

Text.rich(
  TextSpan(
    style: TextStyle(
      fontSize: 17,
    ),
    children: [
      TextSpan(
        text: 'Tap',
      ),
      WidgetSpan(
        child: Icon(Icons.add),
      ),
      TextSpan(
        text: 'on the right hand corner to start a new chat.',
      )
    ],
  ),
)

Answer 2

Flutter has WidgetSpan() to add a widget inside the RichText().

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: "Click ",
      ),
      WidgetSpan(
        child: Icon(Icons.add, size: 14),
      ),
      TextSpan(
        text: " to add",
      ),
    ],
  ),
)

Above code will produce:

Click > to add

You can treat the child of WidgetSpan like the usual widget.

Answer 3

You need put sinlein line crossAxisAlignment: CrossAxisAlignment.start inside Row

Row (
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
                  Icon(Icons.add, size: 14),
                  Expanded(
                      child: Text("your multiline text "),
                      ),
                    ),
                ],
    
)