I’ve been using Flutter for a couple of days and I’m struggling to make my buttons change in size. Currently, I’m using two ElevatedButtons with CircleBorder shapes, inside of a row inside of a column that also contains a regular ElevatedButton. What I need is for the buttons to all expand to take up the full width of the row with just a bit of margin around the edges. Thanks.

I’ve used the colours just to highlight the area taken up by the container, row and buttons respectively.

This is the kind of layout I’m trying to go for:

home.dart:

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Select Holes"),
      ),
      body: Container(
        color: Colors.lightGreenAccent,
        child: const Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            SizedBox(height: 30),
            HoleSelectionButtons(),
            GoButton()
          ],
        ),
      ),
    );
  }
}

buttons.dart:

class HoleSelectionButtons extends StatelessWidget {
  const HoleSelectionButtons({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: Change size and layout of buttons
    return Container(
      color: Colors.redAccent,
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          HoleButton(holes: 9),
          HoleButton(holes: 18),
        ],
      ),
    );
  }
}

class HoleButton extends StatelessWidget {
  const HoleButton({
    required this.holes,
    super.key,
  });

  final int holes;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueAccent,
      child: Consumer<AppState>(
        builder: (context, state, child) => ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: const CircleBorder(),
            backgroundColor: state.holeCount() == holes ? Colors.blue : Colors.grey,
            // TODO: Make this come from the theme, or at least make it a better colour
          ),
          onPressed: () {
            state.setHoleCount(holes);
          },
          child: Text(holes.toString()),
        ),
      ),
    );
  }
}