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.
Here is the whole code:

CodePudding user response：

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

CodePudding user response：

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: () {},
              ),
            )
                          

CodePudding user response：

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),
        )
      ],
    );
  }
}