0

Within my layout, I have a Row. On the left side of that Row, I have a Column containing two Text objects of differing font sizes. On the right side of the Row, I have an Image. I want the Image to scale itself uniformly to have an equal height to the intrinsic height of the Column on the left side of the Row. I want this to work whether the Image's pixel height is lesser or greater than the intrinsic height of the Column, regardless of the font sizes used in the Text widgets and the text scaling factor used by the operating system. (That is, I don't want to hard-code the Image size.)

How can I make this work? I suspect I may need to cloak the Image in some widget to make its parent think it has an intrinsic height of 0 because Images have intrinsic heights equal to their pixel heights.

Here is some broken code I tried in DartPad:

(Note: the network image is the same image used in the documentation @ https://flutter.dev/docs/cookbook/images/network-image . I don't have any rights to it.)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: IntrinsicHeight(
      child: Container(
        color: Colors.green,
        width: 600,
        height: 600,
        child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
          Column(children: [
            Text("Larger", style: TextStyle(fontSize: 36)),
            Text("Smaller", style: TextStyle(fontSize: 18))
          ]),
          Expanded(
              child: Image.network(
            "https://picsum.photos/250?image=9",
            alignment: Alignment.bottomRight,
            fit: BoxFit.scaleDown,
          ))
        ]),
      ),
    )));
  }
}
80386 DX
  • 135
  • 1
  • 2
  • 5
  • Hey let me know if i got this right, ur trying to fill the image for the complete height of the container right? This will cut some of the image's width because of how much it is zoomed, is that fine? – Jaison Thomas Jul 25 '21 at 02:52
  • @JaisonThomas Cut as in crop? I don't want to crop. I want to retain the original image aspect, which for a tall image would reduce both the height and the width, scaling it down to fit in the container's height. – 80386 DX Jul 25 '21 at 02:58
  • oka so u want an image centered to your container but as tall as possible right? – Jaison Thomas Jul 25 '21 at 03:12
  • @JaisonThomas Ideally, I would have the image right-aligned and vertically centered in the row. And I want the height of the image to match the height of the text column (i.e. the combined height of the Text widgets.) So if the image ends up too tall, it would be unsuitable. – 80386 DX Jul 25 '21 at 03:29
  • Oka so u want an image that has the height of the 2 text fields and is right aligned? is it fine if the text is centered too? – Jaison Thomas Jul 25 '21 at 03:32
  • @JaisonThomas First question, yes. Second question: the column of text widgets needs to remain aligned to the left side of the row, and the text widgets ought to be aligned to the left side of the column. – 80386 DX Jul 25 '21 at 03:37
  • oka i got it i think – Jaison Thomas Jul 25 '21 at 03:41
  • I can't seem to do it without hardcoding the values for the column of texts, check out this link it may help [Intrinsic heights](https://stackoverflow.com/a/51330109/10755967) – Jaison Thomas Jul 25 '21 at 04:16

0 Answers0