TextSpan's text doesn't show if it overflows and is placed after WidgetSpan

Question

It's a pretty specific scenario and I'm not really sure of the exact cause. Code is given below. To summarize: I create a Container widget, set a specific width value then set RichText widget as it's child. Populate the RichText with two InlineSpans. One WidgetSpan and one TextSpan. TextSpan comes after WidgetSpan. If the InlineSpans' content's width exceeds the Container's width and maxLines is set to 1; only WidgetSpan is displayed, TextSpan is not displayed at all.

I just want to display as much of the text as we can inside the container then end with whatever overflow option I chose for RichText. I tried different options for overflow, none of them changed the result. My preferred option is TextOverflow.ellipsis but others except TextOverflow.clip are fine too.

I have to use WidgetSpan to center the icon character vertically. If there is any other way to accomplish that I will be totally fine with it.

Picture below is the container at full capacity with width value 250. Font sizes are given below in the code section. WidgetSpan character is chosen at random, changing the character doesn't fix the problem.

This is the container with width value 240. As you can see it overflowed and TextSpan's text has completely disappeared. WidgetSpan is aligned to right by purpose, changing alignment doesn't change the outcome.

And this is the minimal code of the Container widget.

Container(
    width: 250,
    child: RichText(
        maxLines: 1,
        text: TextSpan(
            children: [
                WidgetSpan(
                    alignment: PlaceholderAlignment.middle,
                    child: Text(String.fromCharCode(1005),
                        style: TextStyle(
                        color: Colors.black,
                        fontSize: 25))
                        ),
                TextSpan(
                    text: 'wwwwwwwwwwwwwwwwwwww',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 15),
                )
            ]
        ),
    ),
),

Answer 1

Is this what you want?
I used Row widget instead of RichText.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      width: 250,
      child: Row(
        children: [
          Text(
            String.fromCharCode(1005),
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
          Expanded(
            child: Text(
              'wwwwwwwwwwwwwwwwwwwwwwwwww',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: Colors.black, fontSize: 15),
            ),
          ),
        ],
      ),
    );
  }
}