How to align expanded widgets in a row

Issue

Why does the 1st two work but not the 3rd?? what’s the alternative to add vertical divider with height that stretch to the max height of the row?

These 2 works

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      // crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          child: Text('Kicukiro'),
        ),
        Container(width: 1,color: Colors.black,height: double.infinity,),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10),
            child: Text('Kicukiro'),
          )
      ],
    )

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Container(
            child: Text('Kicukiro'),
          ),
        ),
        // Container(width: 1,color: Colors.black,height: double.infinity,),
        Expanded(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text('Kicukiro'),
            ),
        )
      ],
    )

this does not work

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Container(
            child: Text('Kicukiro'),
          ),
        ),
        Container(width: 1,color: Colors.black,height: double.infinity,),
        Expanded(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text('Kicukiro'),
            ),
        )
      ],
    )

Solution

Test this and it will work

 IntrinsicHeight(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                     Expanded(
                       child: Container(
                           child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
                     ),
                    Container(color:Colors.black, width: 1),
                     Expanded(
                       child: Container(
                         padding: const EdgeInsets.symmetric(horizontal: 10),
                           child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
                     ),
                  ],
                ),
              ),

Answered By – behnam bagvand

Answer Checked By – Marie Seifert (FlutterFixes Admin)