Can't Make Expanded Text Work Inside a Row Flutter

I have a List (its not listview) that is being rendered inside a SingleChildScrollView. Each item of this list is like Card, that its divided this order: Padding > Container > Row > Container | Column > Text | Row > Expanded > Text

Inside this last Text Widget, I need to expand it because i’m using TextOverFlow.ellipsis effect…

Heres the widget code:

SingleChildScrollView(
  child: Column(
       children: [
    Container(...),
Column(
    children: List.generate(data.length, (index) {
  return Padding(
    padding: const EdgeInsets.only(top: 16.0),
    child: Container(
      color: Colors.white,
      constraints: const BoxConstraints(
        minHeight: 120,
      ),
      child: Row(children: [
        Container(
          color: _switchColor(data[index].type),
          width: 15,
          height: 120,
        ),
        Padding(
          padding: const EdgeInsets.only(
              left: 50.0, right: 14),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment:
                CrossAxisAlignment.start,
            children: [
              Text(
                data[index].title,
                style: const TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w600,
                  fontSize: 16,
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(
                    child: Text(
                      data[index].description,
                      style: const TextStyle(
                          color: Colors.black),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              )
            ],
          ),
        )
      ]),
    ),
  );
}));
);

I have already tried wrapping all the columns and rows inside Expanded,tried MainAxisSize.min…

>Solution :

While you are using Expanded over Text to get available space, its parent also need to get available space for the child. Size goes up.

Wrap top level Padding with Expanded widget.

Expanded(//this
  child: Padding(
    padding: const EdgeInsets.only(left: 50.0, right: 14),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          data[index].title,
          style: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w600,
            fontSize: 16,
          ),
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: Text(

Leave a Reply