Flutter: Getting relative height of widget for vericalDivider - flutter

Question

Im building a screen where a widget is supposed to look like a Tweet. Im trying to implement the vertical bars seen under profile pictures with the following:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
VerticalDivider(
color: Colors.red,
thickness: 10,
width: 20,
),
//make a widget that looks like twitter composing tweet
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(user.imageUrls[0]),
),
//add a gray line that runs down the middle of the screen
VerticalDivider(
color: Colors.red,
thickness: 10,
width: 200,
),
],
),
),
Which looks like this:
As you can see, the dividers are invisible. Wrapping the divider with a specified height makes it look like this:
It is now visible, but obviously expands outside of the original size of the widget. Is there any way to pass the size of the parent into the VerticalDivider so i knows how much space it has to work with?
Thanks!

Answer 1

You can wrap your Row with the IntrinsicHeight widget. It will set the rows height based on its tallest child (here the Container with height = 200). Of course in your example you don't know the tallest child's size before layout, I used the container simply to give you an example. IntrinsicHeight is relatively expensive to use but the right choice for such use cases (see its docs).
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return IntrinsicHeight(
child: Row(
children: [
Container(
color: Colors.grey,
child: Column(
children: [
SizedBox(
child: VerticalDivider(
color: Colors.red,
thickness: 10,
width: 20,
),
height: 20,
),
Container(height: 40, width: 40, color: Colors.blue),
Expanded(
child: VerticalDivider(
color: Colors.red,
thickness: 10,
width: 20,
),
),
],
),
),
Container(
height: 200,
width: 200,
color: Colors.white,
)
],
),
);
}
}