A RenderFlex overflowed by 260 pixels on the bottom. - ListTile

Question

I'm trying to add column in ListTile trailing but it gives me render flow error, plus it not align to it's title.

here is my code

 SizedBox(
                  height: MediaQuery.of(context).size.height * 0.55,
                  child: ListTile(
                    title: Padding(
                      padding: const EdgeInsets.only(left: 5),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Date"),
                          SizedBox20(),
                          Text("Token no"),
                          SizedBox20(),
                          Text("Token Issuance Date"),
                          SizedBox20(),
                          Text("Token Issuance Time"),
                          SizedBox20(),
                          Text("Calling Place"),
                          SizedBox20(),
                          Text("Total Fee"),
                          SizedBox20(),
                          Text("Advance"),
                          SizedBox20(),
                          Text("Remaining"),
                          SizedBox20(),
                          Text("Status"),
                          SizedBox20(),
                        ],
                      ),
                    ),
                    trailing: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text("5/11/2021"),
                        SizedBox20(),
                        Text("36"),
                        SizedBox20(),
                        Text("2/11/2021"),
                        SizedBox20(),
                        Text("12:15:00 PM"),
                        SizedBox20(),
                        Text("Desk 07"),
                        SizedBox20(),
                        Text("PKR. 1,000/-"),
                        SizedBox20(),
                        Text("PKR. 200/-"),
                        SizedBox20(),
                        Text("PKR. 800/-"),
                        SizedBox40(),
                        Text("Unattended"),
                        // SizedBox20(),
                      ],
                    ),
                  ),
                ),

I want it like title Date and trailing 5/11/2021 should be align in one line, and same for all.

it should look like

here is my code output

please help how to fix it.

you should not use `ListTile` for a layout like yours: `ListTile` is designed to present one or two lines of text (in extreme cases three lines can be provided) - if the way `ListTile` pads and positions its elements isn't quite what you're looking for, it's easy to create custom list items with a combination of other widgets, such as `Rows` and `Columns` — pskink, Nov 12 '21 at 06:40

score 1 · Accepted Answer · answered Nov 12 '21 at 07:04

Try below code hope its helpful to you. used Column and Rows Widget instead of ListTile

SingleChildScrollView(
  padding: EdgeInsets.all(10),
  child: Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Date"),
          Text("5/11/2021"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Token no"),
         Text("36"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Token Issuance Date"),
          Text("2/11/2021"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Token Issuance Time"),
          Text("12:15:00 PM"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Calling Place"),
          Text("Desk 07"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Total Fee"),
         Text("PKR. 1,000/-"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Advance"),
          Text("PKR. 200/-"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Remaining"),
          Text("PKR. 800/-"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Status"),
          Text("Unattended"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
    ],
  ),
);

Your result Screen ->

A RenderFlex overflowed by 260 pixels on the bottom. - ListTile

1 Answers1