overflowing flutter columns and rows

Question

I have this list view in flutter which I am trying to make into a chat list. Similar to what you see in WhatsApp and telegram. However I am struggling to get the idea of how rows and columns work because I keep getting overflows.

Here is the code:

ListView(
      physics: BouncingScrollPhysics(),
      children: [
        Dismissible(
          key: Key(""),
          background: Container(color: Colors.grey[200]),
          direction: DismissDirection.endToStart,
          child: InkWell(
            onTap: () {},
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Flex(
                  direction: Axis.vertical,
                  children: [
                    Text("Hello"),
                  ],
                ),
                Flex(
                  direction: Axis.vertical,
                  children: [
                    Text(
                      "al;skdl;aksd a;skd ;aks;dk a;skd ;laks;d a;lsk d;lkas; dka;lsk d;laks; ldka;slk d;a",
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],

https://stackoverflow.com/a/44580054/12341099 – Yadu Jul 23 '20 at 10:23 — Yadu, Jul 23 '20 at 10:23

score 0 · Answer 1 · answered Jul 23 '20 at 13:42

Now we often experience the text overflow problem so if we think it that we we have provided column a particular width and restricted it but if we wrap the things up with flexible widget it now tells column/Row that you can change your size and be flexible

order would be flexible > Container > Column/Row

The reason we are applying this to container is Column/Row will ask immediate parent for width and height now this problem can also be solved by text overflow property that is we can clip text but what if we dont want too

So all you have to do is Wrap the column/Row in Container and then into Flexible as now it will tell container that yes you can adjust your height

Your concept can be cleared by how actually widgets parent child relationship works i.e in brief basically If am a child I will ask my parent okay what is my size so since my parent if it has a size it will bound me but if it doesnt has a size it will ask its parent okay tell me what space should I take and it goes on. Expanded and Flexible says that okay you can adjust yourself instead of being Fixed.

Flexible(
                                          child: Container(
                                            margin: EdgeInsets.only(left: 10.0,right: 10.0),
                                            child: Column(
                                              mainAxisAlignment: MainAxisAlignment.start,
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [
                                                Text('${dataBookTitleSearch1[index]} ', style: kGoodSearchResultTextStyle, textAlign: TextAlign.left,),
                                                SizedBox(
                                                  height: 10.0,
                                                ),
                                                Text('${dataBookAuthorSearch1[index]}', style: kGoodSearchResultTextStyle,textAlign: TextAlign.left),
                                                SizedBox(
                                                  height: 10.0,
                                                ),
                                                Text('${dataBookExtensionSearch1[index]} ', style: kGoodSearchResultTextStyle,textAlign: TextAlign.left),

                                                SizedBox(
                                                  height: 20.0,
                                                ),
                                                Container(
                                                  width: 80.0,
                                                  height: 40.0,
                                                  decoration: BoxDecoration(
                                                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                                                      color: Colors.white
                                                  ),
                                                  child: Padding(
                                                    padding: const EdgeInsets.only(left:20.0,top: 12.0),
                                                    child: Text('Read'),
                                                  ),
                                                ),

                                              ],
                                            ),
                                          ),
                                        )

overflowing flutter columns and rows

1 Answers1