Shorten my Text and show The orginal version in a small pop-up (TextOverflow.ellipsis gives error)

Question

I want to shorten my Text if it is not fit the area.

for example :

the orginal text is Downtown Manhattan Tour

shorten text should be : Downtown...

and when user clicks the text,

I want to show the full text in a small pop-up which will disapear after 1 second or click somewhere else.

this is my related code:

Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
      height: MediaQuery.of(context).size.height / 12,
      width: MediaQuery.of(context).size.width,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            // we can show related user profile picture in this area,  whe we click it we go to the related user page.
            padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(userAction.owner.picture),
                ),
                SizedBox(
                  width: 5,
                ),
                Text(userAction.owner.firstName +
                    ' ' +
                    userAction.owner.lastName)
              ],
            ),
          ),
          Text(userAction.actionExplanation),
          Padding(
            // we can show tour photo here when user clicks this area user will go to the related tour page.
            padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    userAction.route.name + 'Text Longg',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                CircleAvatar(
                  backgroundColor: Colors.black26,
                ),
              ],
            ),
          ),
        ],
      ),
    );

I find this answer for shorten text but it gives error in my case : Insert overflow ellipsis in text

Error Log:

I/flutter (10591): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10591): The following message was thrown during layout:
I/flutter (10591): A RenderFlex overflowed by 73 pixels on the right.
I/flutter (10591): 
I/flutter (10591): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter (10591): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (10591): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (10591): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (10591): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (10591): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (10591): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (10591): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (10591): like a ListView.
I/flutter (10591): The specific RenderFlex in question is:
I/flutter (10591):   RenderFlex#f2700 OVERFLOWING
I/flutter (10591):   creator: Row ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Column ← _SingleChildViewport
I/flutter (10591):   ← _ScrollableScope ← IgnorePointer-[GlobalKey#4a6a1] ← Semantics ← Listener ← _GestureSemantics ←
I/flutter (10591):   ⋯
I/flutter (10591):   parentData: offset=Offset(1.0, 1.0) (can use size)
I/flutter (10591):   constraints: BoxConstraints(w=409.4, h=55.0)
I/flutter (10591):   size: Size(409.4, 55.0)
I/flutter (10591):   direction: horizontal
I/flutter (10591):   mainAxisAlignment: spaceBetween
I/flutter (10591):   mainAxisSize: max
I/flutter (10591):   crossAxisAlignment: center
I/flutter (10591):   textDirection: ltr
I/flutter (10591):   verticalDirection: down
I/flutter (10591): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (10591): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

This is the working solution. I modified it a little bit to make it working. Try this out.

Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
  height: MediaQuery.of(context).size.height / 12,
  width: MediaQuery.of(context).size.width,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
        child: Row(
          children: <Widget>[SizedBox(width: 5), Text("Text 1 ")],
        ),
      ),
      Text("Text 2 "),
      Expanded(
        child: Text(
          'Text which is very long and very very long indeed and getting things ready',
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      SizedBox(width: 5),
      CircleAvatar(backgroundColor: Colors.black26),
    ],
  ),
);

Answer 2

I couldnt find why TextOwerflow.ellipsis gives error, but I handle my problem:

I find a widget that can do what I wanted the do, The widget name is Tooltip

I handle the text shorten problem with this code:

                Tooltip(
                  message: userAction.route.name,
                  child: Text(
                    userAction.route.name.length < 10
                        ? userAction.route.name
                        : userAction.route.name.substring(0, 10) + '...',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                )