ElevatedButtons overflowing in a row

Question

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.

Answer 1

Wrap each button with Flexible:

children: [
            Flexible(child: simpleButton(width / 6, "B1")),
            Flexible(child: simpleButton(width / 6, "B2")),
            Flexible(child: simpleButton(width / 6, "B3")),
            Flexible(child: simpleButton(width / 6, "B4")),
          ],

result be like: