How to handle overflow of a Row inside a Column inside a Stack in Flutter?

Question

I'm trying to create a simple stack list that for a specific designer reason has the following structure:

Text inside a Padding inside a Row inside a Column inside a Container inside a Positioned inside a Stack inside a Card (although I assume the Card part is irrelevant to the question).

The problem is as follows: once the String inside the Text Widget exceeds a certain amount of characters, it overflows, as shown in the image below:

I've tried wrapping the Text, Row, Column Widgets and so on with a Flexible (or Expanded) Widget, but I get an error message saying "Flexible widgets must be placed inside Flex widgets". I'm pretty sure I lack some knowledge on the Widgets that I'm using, but that knowledge I have not been able to find on the flutter dev website, therefore I have decided to post the question here. This is the code for the Card item in which the Stack is located (I'm not pasting the whole class since other methods and the constructor aren't required to duplicate the error in question and I don't want people to get confused by reading code unrelated to the question):

@override
  Widget build(BuildContext context) {
    return Card(
      child: Stack(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(bottom: 20.0),
            decoration: BoxDecoration(
              border: Border.all(width: 3.5, color: Colors.black87),
              shape: BoxShape.circle,
              image: DecorationImage(
                fit: BoxFit.cover,
                image: this.image ??
                    AssetImage(
                      'images/rolph.jpg',
                    ),
              ),
            ),
          ),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                    top: BorderSide(width: 3.0, color: Colors.black),
                    bottom: BorderSide(width: 1.0, color: Colors.black),
                    right: BorderSide(width: 1.0, color: Colors.black),
                    left: BorderSide(width: 1.0, color: Colors.black)),
              ),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 2.0),
                        child: Text(
                          this.name,
                          overflow: TextOverflow.clip,
                          style: TextStyle(fontSize: 18.0),
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(bottom: 2.0, left: 3.0),
                        child: Text(
                          this.email,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(fontSize: 16.0),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
          _shouldIShowNotificationBubble(),
          Positioned(
            left: 0.0,
            right: 0.0,
            top: 0.0,
            bottom: 0.0,
            child: Container(
              color: Colors.transparent,
              child: InkWell(
                highlightColor: Colors.deepPurple,
                onTap: this.onTap ??
                    () {
                      debugPrint("Ink is, well, clicked.");
                    },
              ),
            ),
          )
        ],
      ),
      color: Colors.white,
      elevation: 4.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    );
  }

I hope anyone's got an answer to my problem since I have not been able to find an adequate one on the internet anywhere. Thanks in advance to everyone who participates in answering!

Answer 1

So after a bit of experimenting, the thing that is needed to be done here is to put the Padding widget (the one directly above the problematic widget and directly under the Row (or Column) inside a Flexible (or Expanded) widget. Along with that, what can and should be added to the Text widget is the overflow behavior, such as the following solution:

                Row(
                    children: <Widget>[
                      Flexible(
                        child: Padding(
                          padding: EdgeInsets.only(left: 2.0),
                          child: Text(
                            this.name,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: 18.0),
                          ),
                        ),
                      )
                    ],

Hope this helps others who have stumbled upon the same error. ^_^