How to show buttons like parallelly in flutter - flutter

Question

I am trying to show the buttons in parallelly view like showing the below image. How to align buttons in parallelly in flutter for android application. But I do not know how to align it. I have attached images for more info. If anyone knows the answer please help to find the solution.
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
const SizedBox(
height: 510,
),
SizedBox(
width: 300, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
//validateForm();
Navigator.push(context,
MaterialPageRoute(builder: (c) => const PhoneLoginScreen()));
},
style: ElevatedButton.styleFrom(
primary: Color(0xff557de3),
shape: StadiumBorder()
),
child: const Text(
"SIGN IN WITH",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
const SizedBox(
height: 20,
),
SizedBox(
width: 300, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
onGoogleSignIn(context);
},
style: ElevatedButton.styleFrom(
primary: Color(0xFF557de3),
shape: CircleBorder(),
padding: EdgeInsets.all(24),
//primary: Color(0xFFF5F1F1),
),
child: const Text(
"GMAIL",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
SizedBox(
width: 300, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
onGoogleSignIn(context);
},
style: ElevatedButton.styleFrom(
primary: Color(0xFF557de3),
shape: CircleBorder(),
padding: EdgeInsets.all(24),
//primary: Color(0xFFF5F1F1),
),
child: const Text(
"PHONE",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
],
),
),
)
From my code:
Expecting like this:

Answer 1

I would probably switch to a Wrap widget considering your expectation.
See Flutter documentation
Main differences are:
Add infinite width to the first widget, so it always takes all the space available.
Removed width on the others. I don't see the need for a 300 width. I might have missed something.
Handle spacing directly with the Wrap widget properties
SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // Or more
spacing: 20, // Or more
children: [
SizedBox(
width: double.infinity, // <-- Your width
height: 50, // <-- Your height
child: // Button
),
SizedBox(
height: 50, // <-- Your height
child: // Button
),
SizedBox(
height: 50, // <-- Your height
child: // Button
),
],
),
),

Answer 2

You could use Row widget for this inside the Column widget.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
EmailButton(),
PhoneButton(),
],
),