When I place the TextButton widget inside the Row widget, the width of the TextButton widget shrinks, and I cannot understand the reason for this.

class DrumMachine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              TextButton(
                onPressed: () {
                  print("f");
                },
                child: Container(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In the code I’ve written, the width of the TextButton widget appears as follows when viewed from the emulator with the Toggle Select Widget Mode setting:

Code without Row widget

However, when I place the TextButton widget inside the Row widget, the width of the TextButton widget appears as follows:

Code with Row widget

The code is as follows:

class DrumMachine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Row(
                children: [
                  TextButton(
                    onPressed: () {
                      print("f");
                    },
                    child: Container(),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In this code, the width of the Row widget is at maximum size, that is, the same size as the width of the TextButton widget in the first code, and I can understand that. However, I cannot understand why in this code the TextButton widget does not remain at maximum width (equal to the width of the Row widget) as it did in the first code, and instead it shrinks. What is the reason for this?

The size of the Row widget is as follows, with maximum width:

Size of the Row widget