Force expanded row item to take maximum available height

Question

I have a Row with 2 Expanded widgets inside. I want the Expanded widgets not only to expand horizontally, but vertically as well.

I know I can take the difference in percentages I'm using to size the other containers, but I strongly feel there is more simple way. I've also tried fractionally sized box with crossAxisAlignment: CrossAxisAlignment.stretch to no avail. Why the hell can't I just expand the container vertically?

@override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * .5,
      width: double.infinity,
      color: Colors.blue,
      child: Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * .33,
            width: double.infinity,
            child: Image.asset(
              'assets/images/temp.png',
              fit: BoxFit.cover,
            ),
          ),
          Row(
            // crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Text('hi'),
                  color: Colors.red,
                ),
              ),

              Expanded(
                flex: 1,
                child: Center(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Text('hi'),
                    color: Colors.green,
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

Output:

@override
Widget build(BuildContext context) {
  return Container(
    height: MediaQuery.of(context).size.height * .5,
    width: double.infinity,
    color: Colors.blue,
    child: Column(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height * .33,
          width: double.infinity,
          child: Image.asset(
            chocolateImage,
            fit: BoxFit.cover,
          ),
        ),
        Expanded( // this is what you need
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Text('hi'),
                  color: Colors.red,
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Text('hi'),
                  color: Colors.green,
                ),
              ),
            ],
          ),
        )
      ],
    ),
  );
}