How to stretch this button in flutter? - flutter

Question

I am learning flutter, and faced this issue:
I want the equal button to stretch to the left and cover the whole green area as shown in the picture.
The equal button is in one column and the other four buttons are in another column. And in turn, both of these columns are in a row. i.e
Column:
Row:
Column 1:
Equal-Button // If I warp it in expended, it goes out of sight.
Column 2:
the other four buttons
What is the proper way to fix it, not just hacks. How would you do it?
Here is the whole code:
Github Gist

Answer 1

You'll need to have it in its own column then use crossAxisAlignment.stretch. Just ensure it occupies a finite space

Answer 2

You can wrap the Elevated Button with Sized Box and give it a width of your choice,
than if you want to put the '=' string to the right instead of center you can just wrap the text with align and set alignemnt to your choice
SizedBox(
width: 300,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.grey.shade600),
),
child: Align(
alignment: Alignment.centerRight,
child: Text(
"=",
style: TextStyle(fontSize: 26),
),
),
onPressed: () {},
),
)

Answer 3

Assuming both the = button and / button are in a Row widget you could wrap the = button in a Expanded widget forcing it to take all available space along it MainAxis.
Here's a quick example:
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(child: Container(color: Colors.red, height: 50)),
Container(
height: 50,
width: 100,
color: Colors.green,
margin: const EdgeInsets.symmetric(horizontal: 10),
)
],
);
}
}