android – showing a dialog doesn’t work when the widget is the direct child of MaterialApp

I’m trying to create an alert dialog in Flutter, but the dialog doesn’t work when it is under MaterialApp and instead gives an error. Below is the code:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Inputs and alerts'),
        ),
        body: ElevatedButton(
          child: const Text('Show Dialog'),
          onPressed: () {
            showDialog(
              context: context,
              builder: (_) {
                return AlertDialog(
                  title: Text('This is a text'),
                  content: Text('this is the content'),
                  actions: (
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(false);
                      },
                      child: Text('No'),
                    ),
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(true);
                      },
                      child: Text('Yes'),
                    )
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Error
enter image description here

But when I extract the ElevatedButton to a stand-alone widget, the alert dialog works fine. Here is the code:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Inputs and alerts'),
        ),
        body: sn(),
      ),
    );
  }
}

class sn extends StatelessWidget {
  const sn({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        child: const Text('Show Dialog'),
        onPressed: () {
          showDialog(
            context: context,
            builder: (_) {
              return AlertDialog(
                title: Text('This is a text'),
                content: Text('this is the content'),
                actions: (
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(false);
                    },
                    child: Text('No'),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(true);
                    },
                    child: Text('Yes'),
                  )
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Output
enter image description here

Can anyone tell me the cause of this behaviour? Any help is greatly appreciated.