Flutter: Make Buttons stretch

Question

I having an issue with a Flutter Widget tree I am building:

I Want the Buttons on the Bottom to be bigger and fill all the available space from the text above to the bottom of the screen.

Here my current Code:

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Column(
        children: [
          UpperDetailsContainer(),
          TitleAndPrice(),
          //The Row below contains the Two Buttons
          Expanded(
            child: Row(
              children: [
                Container(
                  width: size.width / 2,
                  child: TextButton(
                    child: Text("Buy Now"),
                    style: TextButton.styleFrom(
                      backgroundColor: kPrimaryColor,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(50)
                        )
                      )
                    ),
                  ),
                ),
                Container(
                  width: size.width / 2,
                  child: TextButton(
                    child: Text("Description"),
                    style: TextButton.styleFrom(
                        backgroundColor: kPrimaryColor,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(50)
                            )
                        )
                    ),
                  ),
                ),
              ],
            ),
          )
        ],

      ),
    );
  }
}

I have already tried:

• Making the upper widgets smaller
• Adding Mainaxisaligment.spacebetween to the surrounding column
• Adding Crossaxisaligment.stretch to the Row that contains the buttons
• Removing SafeArea bottom / SafeArea as a whole
• Setting the height for the buttons manually as an absolute value, but I don't really wanna do this for obvious reasons

What else can i do? And where does that grey bottom Stripe come from?

Answer 1

add crossAxisAlignment: CrossAxisAlignment.stretch to the row, so that it fills all available vertical space

note: you need the Expanded widget so that the constraint your row gets, isn't infinite

@override
Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          height: size.height * 0.7,
          child: Container(
            color: Colors.amber,
          ),
        ),
        Expanded(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _buildBuyNowButton(size),
              _buildDescriptionButton(size),
            ],
          ),
        )
      ],
    ),
  );
}

Runnable example: https://www.dartpad.dev/4f568d8e0a334d23e7211207081356b4?null_safety=true