twitter clone on flutter (the vertical line next to the post)

Question

I'm trying to create a twitter clone on flutter and I want to show a vertical line next to the post but even if I tried to handle this for hours I couldn't solve the issue. the thing I'm trying to do is this ..

Here is my post model

Column(
  children: [
    Container(
      decoration: BoxDecoration(
          border: Border(
              bottom: result
                  ? const BorderSide()
                  : BorderSide(width: 1.5, color: Colors.grey[900]!))),
      child: CupertinoButton(
          padding: const EdgeInsets.fromLTRB(15, 10, 15, 4),
          onPressed: () {},
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://www.pngkit.com/png/detail/843-8436987_gitapp-github.png'),

                    // I want the vertical line to appear here til the second widget starts

                  ),
                ],
              ),
              const SizedBox(
                width: 15,
              ),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Text(
                              'username',
                              style: TextStyle(
                                  color: Colors.grey[300],
                                  fontSize: 19,
                                  fontWeight: FontWeight.bold),
                            ),
                            Row(
                              children: [
                                const SizedBox(
                                  width: 5,
                                ),
                                Text(
                                  String.fromCharCode(CupertinoIcons
                                      .checkmark_seal_fill.codePoint),
                                  style: TextStyle(
                                    inherit: false,
                                    color: kThemeColor,
                                    fontSize: 17.0,
                                    fontWeight: FontWeight.w900,
                                    fontFamily:
                                        CupertinoIcons.heart.fontFamily,
                                    package:
                                        CupertinoIcons.heart.fontPackage,
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(right: 15.0),
                          child: GestureDetector(
                              child: const Icon(
                                CupertinoIcons.ellipsis,
                                color: Colors.grey,
                              ),
                              onTap: () {}),
                        ),
                      ],
                    ),
                    Text(
                      timeago.format(
                        widget.timestamp.toDate(),
                      ),
                      style: TextStyle(
                          color: Colors.grey[600],
                          fontWeight: FontWeight.w500),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Text(
                      'This is the main content ',
                      style: TextStyle(
                          color: Colors.grey[350],
                          fontSize: 16,
                          fontWeight: FontWeight.w500),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        CupertinoButton(
                            padding: EdgeInsets.zero,
                            child: Row(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(top: 5.0),
                                  child: Text(
                                    String.fromCharCode(isLiked
                                        ? CupertinoIcons
                                            .heart_fill.codePoint
                                        : CupertinoIcons.heart.codePoint),
                                    style: TextStyle(
                                      inherit: false,
                                      color: isLiked
                                          ? kThemeColor
                                          : Colors.grey[600],
                                      fontSize: 17.0,
                                      fontWeight: FontWeight.w900,
                                      fontFamily:
                                          CupertinoIcons.heart.fontFamily,
                                      package:
                                          CupertinoIcons.heart.fontPackage,
                                    ),
                                  ),
                                ),
                                const SizedBox(
                                  width: 8,
                                ),
                                const Text(
                                  'likeCount',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w500,
                                    fontSize: 17.0,
                                  ),
                                )
                              ],
                            ),
                            onPressed: () {
                              // handleLikePost();
                            }),
                        CupertinoButton(
                            padding: EdgeInsets.zero,
                            child: Text(
                              String.fromCharCode(
                                  UniconsLine.comment.codePoint),
                              style: TextStyle(
                                inherit: false,
                                color: Colors.grey[600],
                                fontSize: 17.0,
                                fontWeight: FontWeight.w900,
                                fontFamily: UniconsLine.comment.fontFamily,
                                package: UniconsLine.comment.fontPackage,
                              ),
                            ),
                            onPressed: () {}),
                        CupertinoButton(
                            padding: EdgeInsets.zero,
                            child: Text(
                              String.fromCharCode(
                                  UniconsLine.process.codePoint),
                              style: TextStyle(
                                inherit: false,
                                color: Colors.grey[600],
                                fontSize: 17.0,
                                fontWeight: FontWeight.w900,
                                fontFamily: UniconsLine.comment.fontFamily,
                                package: UniconsLine.comment.fontPackage,
                              ),
                            ),
                            onPressed: () {}),
                        CupertinoButton(
                            padding: EdgeInsets.zero,
                            child: Text(
                              String.fromCharCode(
                                  UniconsLine.bookmark.codePoint),
                              style: TextStyle(
                                inherit: false,
                                color: Colors.grey[600],
                                fontSize: 17.0,
                                fontWeight: FontWeight.w900,
                                fontFamily: UniconsLine.bookmark.fontFamily,
                                package: UniconsLine.bookmark.fontPackage,
                              ),
                            ),
                            onPressed: () {}),
                        CupertinoButton(
                            padding: EdgeInsets.zero,
                            child: Text(
                              String.fromCharCode(
                                  UniconsLine.upload.codePoint),
                              style: TextStyle(
                                inherit: false,
                                color: Colors.grey[600],
                                fontSize: 17.0,
                                fontWeight: FontWeight.w900,
                                fontFamily: UniconsLine.share.fontFamily,
                                package: UniconsLine.share.fontPackage,
                              ),
                            ),
                            onPressed: () {}),
                      ],
                    )
                  ],
                ),
              )
            ],
          )),
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        result
            ? Container(
                margin: const EdgeInsets.only(left: 35),
              )
            : const SizedBox(),
        Column(
          children: subComments,
        ),
      ],
    )
  ],
);

Answer 1

You need to use IntrinsicHeight to achieve this along with a VerticalDivider wrapped in a Flexible.

class TwitterCard extends StatelessWidget {
  const TwitterCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              CircleAvatar(
                backgroundColor: Colors.yellow,
              ),

              Flexible(child: VerticalDivider()),

              CircleAvatar(
                backgroundColor: Colors.yellow,
              )
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
              Text('Testing the layout'),
            ],
          )
        ],
      ),
    );
  }
}

Here you see the divider fills the height, up to the height of the largest column.

If you need more details/examples on IntrinsicHeight I advise you to check out this StackOverflow question: Flutter Layout Row / Column - share width, expand height