I am trying to display three evenly sized (round) buttons inside of a list, but I have not been successful.

Here is my app:

// main.dart
import 'package:flutter/material.dart';

final ButtonStyle styleSelected = ElevatedButton.styleFrom(
  textStyle: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  backgroundColor: Colors.redAccent,
);

final ButtonStyle styleDefault = ElevatedButton.styleFrom(
  textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.normal),
  backgroundColor: Colors.green,
);

void main() {
  runApp(const ButtonsApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Buttons App',
      theme: ThemeData(colorScheme: .fromSeed(seedColor: Colors.transparent)),
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [ButtonsStatefulWidget()],
        ),
      ),
    );
  }
}

class ButtonsStatefulWidget extends StatefulWidget {
  const ButtonsStatefulWidget({super.key});

  @override
  State createState() => _ButtonsStatefulWidgetState();
}

class _ButtonsStatefulWidgetState extends State {
  late int _selected;

  @override
  void initState() {
    super.initState();
    _selected = 0;
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width / 4,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          ListView.separated(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: 3,
            separatorBuilder: (BuildContext context, int index) =>
                const SizedBox(width: 64),
            itemBuilder: (BuildContext context, int index) {
              return ElevatedButton(
                style: index == _selected ? styleSelected : styleDefault,
                onPressed: () {
                  setState(() {
                    _selected = index;
                  });
                },
                child: Text(index.toString()),
              );
            },
          ),
        ],
      ),
    );
  }
}

As far as I can see from dev tools, the parent Row occupies the entire width of the screen, as you would expect, and the ListView is wrapped around the three items. I would expect the ListView to be expanded to occupy the entire width as well, though.

The ElevatedButton, however, stubbornly occupies the entire height of that Row. I have wrapped it into a SizedBox with equal width and height (half the height of the parent Row), but that didn't work.

I have also tried to set min, max, and fixed size on

ElevatedButton.styleFrom