How can stretch height of one of child widget according to another widget in a row?

Question

I wanted to get same dynamic height of right widget to left widget in Row Widget.Below I was attaching screenshot of my expected design. Could you help how can do that.

We can see right side date widget is expanding , So I wanted to get the height of left side widget(blue and purple) same as right side widget.

If left side image widget is not possible to expand the height then is any there any possible to create custom widget, Any solution is welcome. Thanks in advance.

Row(
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                    constraints: BoxConstraints(
                      minHeight: 40.0,
                      maxHeight: 50.0,
                      /*maxWidth: 10,
                      minWidth: 10,*/
                    ),
                    padding: EdgeInsets.only(top: 0.0),
                    //height: 98,
                    width: 20,
                    child: ShaderMask(
                      shaderCallback: (bounds) {
                        return LinearGradient(
                          colors: [Color(0xff12229F), Color(0xff615FDF)],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                        ).createShader(bounds);
                      },
                      child: ImageIcon(
                        AssetImage('assets/images/reservations/small_timeline.png'),
                        color: Colors.white,
                        size: 40,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      pickup(data),
                      dropoff(data),
                    ],
                  ),
                ),
              ],
            ),

After Using IntrinsicHeight I was unable to remove default padding around the icons

IntrinsicHeight(
              child: Padding(
                padding: const EdgeInsets.only(top: 0,bottom: 0),
                child: Row(
                  children: [
                    Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(top: 4),
                          child: Icon(
                              Icons.fiber_manual_record,
                          size: 18,
                          color: Color(0xff11219E),),
                        ),
                        Flexible(
                          child: Container(
                            decoration: BoxDecoration(
                              gradient:
                              LinearGradient(colors: [Color(0xff11219E), Color(0xff6F6AEB)]),
                            ),
                            width: 4,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(bottom: 4),
                          child: Icon(
                              Icons.fiber_manual_record,
                            size: 18,
                            color: Color(0xff6F6AEB),),
                        ),
                      ],
                    ),
                    Expanded(
                      child: Column(
                        children: [
                          pickup(data),
                          dropoff(data),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),

i used this IntrinsicHeight but i was unable to remove icon default padding, i updated my above — shanmkha, Aug 24 '22 at 09:33
use `CustomPainter` then, something like https://stackoverflow.com/a/64714941/2252830 - of course you don't have to animate it, in that case remove `AnimationController` — pskink, Aug 24 '22 at 09:47

score 0 · Answer 1 · answered Aug 24 '22 at 09:34

It seems to me that Expanded could be used to expand your widget to full availabe height.

Keep in mind that the Row width will distribution will also expand, since no flex parameter is provided. You already have an Expanded on the right widget so just add the other one and provide a flex value for both of them.

Some thing like 10 for left and 90 for right should work for you :)

How can stretch height of one of child widget according to another widget in a row?

1 Answers1