Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make an image fill the remaining space in a Row with sibling Column of text?

I want to do this without using fixed heights or widths so that it still looks good if the user changes font size in display settings (which will change bot the height and width of the second column which contains text).

The best I have been able to do is the following, but with this the thumbnails which are taller cause the Container to be taller and there is a gap below the text, and the thumbnails which are wider have white above and below them

Also, I read that using the Intrinsic widgets is performance heavy, and this container will be repeated about 100 times in a list view so not sure that’s a good idea

Container(
      decoration: BoxDecoration(...),
      child: IntrinsicHeight(
        child: Row(
          children: [
            Expanded(
              child: Image(
            image: thumbnailProvider,
            fit: BoxFit.cover,
          ),
            ),
            const IntrinsicWidth(
              child: Column(children: [
                Text('hello'),
                Text('something'),
                Text('bla bla bla bla bla bla bla'),
              ]),
            ),
          ],
        ),
      ),
    );
Tags:

2

Answers


  1. 0

    try using flexible or boxfit instead of IntrinsicWidth or IntrinsicHeight

    Login or Signup to reply.
  2. 0

    Without all the information surrounding the code snippet I can provide you with some general tips for you to complete the task provided.

    First, you don’t need to use the intrinsic widgets you can set up the child of your Container as follows, note I used an Icon Widget instead of your image as I did not have the image resource:

    Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          flex: 1,
          child: Icon(
            Icons.ac_unit_outlined,
            color: Colors.black,
          ),
        ),
        Expanded(
          flex: 2,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('hello'),
              Text('something'),
              Text('bla bla bla bla bla bla bla'),
            ],
          ),
        ),
      ],
    ),

    1. Defining the mainAxisSize as min will build the column widget to just occupy the size it needs rather than the available space.

    2. Assigning a flex value to the expanded widgets provide information on how much space the widgets take up in the horizontal direction, in the provided case, the Icon takes up 1/3rd of the width available while the column widget takes up 2/3rds. Play with these values as you see fit.

    3. crossAxisAligment allows you to place the widgets where you want them. I set row to center here so that the Icon is centered in the space that the column will expand to in the vertical direction, this may not apply to you as I imagine you want the image to take up the full space since you include the fit as BoxFit.cover. I set column to start so that the text is lined up on the left side of the available space.

    Please comment if you have any questions and if you want to provide more context to help build the widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search