How to size a Widget in Row based on other widgets?

Question

I want to create a layout that is commonly seen in applications showing details about public transport. On the left, there will be a line with a dot and on the right the details about the station.

I want to draw the line with the dot using a CustomPainter in Flutter and show the data besides it by using a Row and wrapping the data in Expanded().

The problem is that I want the CustomPainter to have the same height as the Widget containing the data, which is dynamic. If I set the CustomPainter's height to double.infinite, I get an error.

How can I determine the size of the data Widget in order to set the width of the CustomPainter?

Answer 1

You can use IntrinsicHeight or IntrinsicWidth, so the Widgets inside a Row or Column, will be as tall/wide as the tallest/widest widget inside it:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Intrinsic Height'),
          ),
          body: IntrinsicHeight(
            child: Row(
              children: <Widget>[
                Container(
                  width: 50,
                  color: Colors.red,
                ),
                Expanded(
                  child: Text(
                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, '
                      'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt '
                      'explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur '
                      'magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia '
                      'dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore '),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Result: