fluttertrailinglisttile

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

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

enter image description here

here is my code output

enter image description here

please help how to fix it.

Solution

  • 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 -> Image