Search code examples
flutterdartflutter-layout

In Flutter, how to do a row layout with textfield and a square image


Im trying to achieve the following layout inside a row (please see attached image):

  1. A TextField, with 3 lines
  2. A square image container (aspect ratio of 1:1), where the image has a cover fit

enter image description here

Constraints: I want the TextField to set the height of the row, so no matter how big or small the font size, the image will always be square, and its height the same as the TextField height.
So I don't want to use any pixel sizes

This is my initial code, but of course the image is not constrained...
Any ideas on how to fix that?

IntrinsicHeight(
  child: Row(
    children: [
      Flexible(
        child: TextField(
          controller: _controller,
          maxLines: 3,
        ),
      ),
      Image.file(File(imagePath), fit: BoxFit.cover)
    ],
  ),
)

Solution

  • Try this:

    IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Flexible(
                child: TextField(
                  controller: _controller,
                  maxLines: 3,
                ),
              ),
              AspectRatio(
                aspectRatio: 1,
                child: Image.file(File(imagePath), fit: BoxFit.cover, width: 0),
              ),
            ],
          ),
        );