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

How to fit height of child in Row to the height of other Row children in flutter?

I want to squeeze a child so that it fit to the height of another child.

So I need to transform this:

enter image description here

to this:

enter image description here

My code is as follows:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Row(
      children: [
        Expanded(
          child: Image.asset('assets/test.jpg'),
        ),
        Container(
          width: 200,
          height: 150,
          color: Colors.green,
        ),
      ],
    )));
  }
}

I know how to stretch the child to the row height. But I would like to squeeze child.

Edits: The green box has a dynamic height.

Tags:

2

Answers


  1. 0

    Since you didn’t specified if the second children (green box) will have a dynamic height, the easier way to achieve that is giving the row a fixed height

    import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SizedBox(
          height: 150,
          child: Row(
            children: [
              Expanded(
                child: Image.network(
                    'https://pbs.twimg.com/media/FF3FCwxXIAcku4C.jpg'),
              ),
              Container(
                width: 200,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    I would use a very handy package boxy for that as follows:

    Instead Row I’m using a BoxyRow, which enables us to use the boxy‘s goodies like Dominant. Then, I wrap the widget that I want to dictate the cross-axis (in Row the cross-axis is the vertical axis – height). I also made the Image‘s fit a BoxFit.contain, so that it resizes its contents.

    As for the example, I wrapped the whole scaffold’s body in Center, so that the height constraints are loose. Scaffold‘s body has tight constraints, but in real-world scenario I reckon you’d put this widget into a Column or some scrollable like ListView, where the height constraints are also loose.

    Read more in the boxy‘s README.

    import 'package:boxy/flex.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Home()));
}

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BoxyRow(
          children: [
            Expanded(
              child: Image.asset(
                'assets/image.jpg',
                fit: BoxFit.contain,
              ),
            ),
            Dominant(
              child: Container(
                width: 200,
                height: 150,
                color: Colors.green,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    solution screenshot

    I recommend the boxy package greatly, as it has also a very powerful CustomBoxy, which is basically an abstraction over a RenderObject layer with a much much higher Developer Experience.

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

Back To Top
Search