Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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(
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading