ElevatedButtons overflowing in a row-CodePudding

I am creating a row of 6 ElevatedButton and setting height, width of each button to 1/6 of total screen's width. But when I run the app on my phone and make the app size smaller, the buttons in the row show an overflow after a certain limit ie they take more than 1/6 of the screen's width..

ElevatedButton simpleButton(double size, String text) {
    return ElevatedButton(
      onPressed: null,
      style: ElevatedButton.styleFrom(
        fixedSize: Size(size, size),
      ),
      child: Text(
        text,
      ),
    );
  }

 @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            simpleButton(width / 6, "B1"),
            simpleButton(width / 6, "B2"),
            simpleButton(width / 6, "B3"),
            simpleButton(width / 6, "B4"),
          ],
        ),
      ),
    );
  }

I want the buttons to take 1/6 of the current screen's width even when the size of android app is minimum. Thanks in advance.

CodePudding user response：

Wrap each button with

CodePudding user response：

We've multiple ways to get this done like by using Flexible widget. Your widget (button) will be responsive/dynamic in sizes. You can also read the screen width directly out of MediaQuery.of(context).size and create a sized box based on that

MediaQuery.of(context).size.width / 6