Make a container stretch to remaining height in a Flutter ListView Item

Ololo
July 20, 2023
299 views
1 vote
2 Answers

How can I adjust the code to make the container inside the ListViewItem take up the remaining available height, similar to the connecting lines in a Twitter thread? Here’s my current implementation:

Widget _buildListViewItem(BuildContext context) {
  return Column(
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          IntrinsicHeight(
            child: Column(
              children: [
                const Padding(
                  padding: EdgeInsets.only(left: 8.0),
                  child: CircledLetterAvatar(
                    text: "T",
                    size: 40,
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 8.0),
                    child: Container(
                      width: 2,
                      color: Colors.white,
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Full Name"),
                  Text(
                    "In publishing and graphic design, "
                    "Lorem ipsum is a placeholder text commonly used to demonstrate "
                    "the visual form of a document or a typeface without relying on meaningful content. "
                    "Lorem ipsum may be used as a placeholder before final copy is available",
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ],
  );
}

The issue I’m facing is that the container inside the ListViewItem is not taking up the remaining height available. I want it to stretch vertically to the same height as the right column (the one with "Full Name" and the paragraph).

Below is the expected result:

Any ideas on this will be really appreciated.

Thanks

Tags: flutter

Answers

you can try this :

Stack(
          children: [
            Container(
              padding: const EdgeInsets.only(left: 28.0),
              child: VerticalDivider(
                color: Colors.blue,
                thickness: 3,
              ),
            ),
            Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    IntrinsicHeight(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: ClipOval(
                          child: Material(
                            elevation: 4,
                            color: Colors.blue, // Button color
                            child: Container(
                              width: 40,
                              height: 40,
                              child: Center(
                                child: Text(
                                  "T",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("Full Name"),
                            Text(
                              "In publishing and graphic design, "
                              "Lorem ipsum is a placeholder text commonly used to demonstrate "
                              "the visual form of a document or a typeface without relying on meaningful content. "
                              "Lorem ipsum may be used as a placeholder before final copy is available",
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        )

You can try this. Wrap the whole ‘Row’ widget inside an ‘Expanded’ widget. This will ensure the ‘Row’ widget takes up all the available vertical space within the column. Then you can you ‘Expanded’ widgets inside the ‘Row’ to achieve your desired layout.

Code:

Widget _buildListViewItem(BuildContext context) {
  return Column(
    children: [
      Expanded( // Wrap the Row inside Expanded
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            IntrinsicHeight(
              child: Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 8.0),
                    child: CircledLetterAvatar(
                      text: "T",
                      size: 40,
                    ),
                  ),
                  Expanded( // Use Expanded to make the container take remaining height
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Container(
                        width: 2,
                        color: Colors.white,
                      ),
                    ),
                  )
                ],
              ),
            ),
            Expanded( // Use Expanded to make the right column take remaining width
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("Full Name"),
                    Text(
                      "In publishing and graphic design, "
                      "Lorem ipsum is a placeholder text commonly used to demonstrate "
                      "the visual form of a document or a typeface without relying on meaningful content. "
                      "Lorem ipsum may be used as a placeholder before final copy is available",
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  );
}

Please signup or login to give your own answer.

Click here to cancel reply.