skip to Main Content

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:

enter image description here

Any ideas on this will be really appreciated.

Thanks

2

Answers


  1. 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",
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            )
    
    Login or Signup to reply.
  2. 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",
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search