How to vertically centre align content of Text.rich()

Question

I want to vertically centre align all contents of Text.rich() but I am not able to do that. Here you can see the red and green boxes are not centre aligned.

Below is my code.

@override
  Widget build(BuildContext context) {
    const textStyle = TextStyle(color: Colors.black, fontSize: 30);
    final testWidgetSpan1 = WidgetSpan(alignment: PlaceholderAlignment.middle, child: Container(height: 10, width: 10, color: Colors.red,));
    final testWidgetSpan2 = WidgetSpan(alignment: PlaceholderAlignment.middle, child: Container(height: 40, width: 40, color: Colors.green,));
    return Scaffold(
      body: Center(
         child:  Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10),
           child: Text.rich(
             TextSpan(children: <InlineSpan>[
               testWidgetSpan1,
               const TextSpan(text: ' ', style: textStyle),
               const TextSpan(text: 'Dummy Text To test rich text in app', style: textStyle),
               const TextSpan(text: ' ', style: textStyle),
               testWidgetSpan2,
             ]),
             overflow: TextOverflow.ellipsis,
             maxLines: 2,
             softWrap: true,
           ),
         ),
      ),
    );
  }

Note - I have to use TextSpan as I need maxLines and ellipsis behaviour as well.

Answer 1

Hope this will help you,

           Text.rich(
              textAlign: TextAlign.center,
              TextSpan(children: [
                WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: Container(width: 5, height: 5, color: Colors.red),
                ),
                const TextSpan(text: ' ', style: TextStyle()),
                const TextSpan(
                    text:
                        "Lorem Ipsum is simparised in the 1960s with the release of Letraset sheets containing Lore desktop",
                    style: TextStyle(color: Colors.red)),
                const TextSpan(text: ' ', style: TextStyle()),
                WidgetSpan(
                  child: Container(width: 15, height: 15, color: Colors.red),
                )
              ]),
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              softWrap: true,
            ),

Answer 2

If I don't misunderstand your meanings, you may want the effect like this img:

For this, just pass textAlign param to your Text.rich() widget:

Text.rich(
  /// Other code ...
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
  softWrap: true,
  /// here you set the text align
  textAlign: TextAlign.center,
)