MyApp The ancestors of this widget were: [root] error on showDialog

Question

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              flex: 5,
              child: Container(
                color: Color(0xFFf4dfc1),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                      width: 50.0,
                      height: 50.0,
                      decoration: BoxDecoration(
                        color: Color(0xFFb5e5e5),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                      child: IconButton(
                        onPressed: () {
                          print(452345256);
                          showDialog(
                            context: context,
                            builder: (context) => AlertDialog(
                              title: Text('My Dialog Title'),
                              content: Text('My Dialog Content'),
                            ),
                          );
                        },
                        icon: Icon(
                          Icons.access_time_rounded,
                          size: 30.0,
                          color: Colors.white,
                        ),
                        constraints: BoxConstraints(
                          minWidth: 50.0,
                          minHeight: 50.0,
                        ),
                      ),
                    ),
                    Container(
                      width: 50.0,
                      height: 50.0,
                      decoration: BoxDecoration(
                        color: Color(0xFFc0e1b1),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                      child: IconButton(
                        onPressed: () {
                          print(1);
                        },
                        icon: Icon(
                          Icons.play_arrow_rounded,
                          size: 30.0,
                          color: Colors.white,
                        ),
                        constraints: BoxConstraints(
                          minWidth: 50.0,
                          minHeight: 50.0,
                        ),
                      ),
                    ),
                    Container(
                      width: 50.0,
                      height: 50.0,
                      decoration: BoxDecoration(
                        color: Color(0xFFf0c8c9),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                      child: IconButton(
                        onPressed: () {
                          print(1);
                        },
                        icon: Icon(
                          Icons.restart_alt_rounded,
                          size: 30.0,
                          color: Colors.white,
                        ),
                        constraints: BoxConstraints(
                          minWidth: 50.0,
                          minHeight: 50.0,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 5,
              child: Container(
                color: Color(0xFFb6876b),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I have to submit this code by tomorrow. However, I searched on google and asked chatGPT, but I couldn't figure out why the showDialog went wrong.

All other code is fine. However, only the 38th line gives an error, and only that needs to be fixed.

While I was trying to get some information and fix it, this error popped up:

MyApp widgets require MaterialLocalizations to be provided by a Localizations widget ancestor.
The material library uses Localizations to generate messages, labels, and abbreviations.
To introduce a MaterialLocalizations, either use a MaterialApp at the root of your application to include them automatically, or add a Localization widget with a MaterialLocalizations delegate.
The specific widget that could not find a MaterialLocalizations ancestor was:
  MyApp
The ancestors of this widget were:
  [root])

Could you tell me what is the cause of this and help me solve it?

I searched google to solve the problem for 3 hours and also asked chatGPT but didn't get anything in the end.

Answer 1

You may use different context for MaterialApp cases like this.

It can be

void main() {
  runApp(MaterialApp(home: MyApp())); //here is 
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(