Flutter - How to show text and icon in one line in row?

user_7679444 0
Viewed 14364

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 enter image description here

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,
        ),
      ),
    )
  ],
)
flutter-layout flutter
3 Answers

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.',
      )
    ],
  ),
)
user_61316110

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.

user_161773050

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 "),
                      ),
                    ),
                ],
    
)
user_98216610
Related