flutter: Another exception was thrown: No MaterialLocalizations found

Question

I am trying to show an Alert Dialog on press of a button in Flutter. Following is my code

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Different Widgets",
      debugShowCheckedModeBanner: false,
      home: showAlertDialog()
      );
  }

  void _dialogResult(String value) {
    if (value == "YES") {
      print("YES");
    } else {
      print("NO");
    }
    Navigator.pop(context);
  }

  Widget showAlertDialog() {
    TextEditingController textEditingController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text("Different Widgets"),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              TextField(
                controller: textEditingController,
              ),
              RaisedButton(
                onPressed: () {
                  print("Hi");
                  AlertDialog dialog = AlertDialog(
                    title: Text("Hi"),
                    content: Text(
                      textEditingController.text,
                      style: TextStyle(fontSize: 30.0),
                    ),
                    actions: <Widget>[
                      FlatButton(
                          onPressed: () {
                            _dialogResult("YES");
                          },
                          child: Text("YES")),
                      FlatButton(
                          onPressed: () {
                            _dialogResult("NO");
                          },
                          child: Text("NO")),
                    ],
                  );

                  showDialog(context: context, builder: (BuildContext context) => dialog);
                },
                child: Text("Click Me"),
              )
            ],
          ),
        ),
      ),
    );
  }

What does this has to do with Localisation, I cannot follow. I did the same steps as per the docs. I am able to see the button but on click of that button I keep getting error. I tried writing print statement inside of button click and the print statement appears in the log, definitely something wrong with AlertDialog.

Answer 1

You may get No MaterialLocalizations found error while showing dialog using showDialog() class in Flutter. The issue is putting child widget on home property of MaterialApp() widget without creating new widget class.

One way to solve is putting MaterialApp() inside runApp() and create new class for home property.

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: MyApp(),
      title: "Different Widgets",
      debugShowCheckedModeBanner: false,
    ),
  );
}

/*
place MaterialApp() widget on runApp() and create
new class for its 'home' property
to escape 'No MaterialLocalizations found' error
*/

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return showAlertDialog();
  }

  void _dialogResult(String value) {
    if (value == "YES") {
      print("YES");
    } else {
      print("NO");
    }
    Navigator.pop(context);
  }

  Widget showAlertDialog() {
    TextEditingController textEditingController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text("Different Widgets"),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              TextField(
                controller: textEditingController,
              ),
              RaisedButton(
                onPressed: () {
                  print("Hi");
                  AlertDialog dialog = AlertDialog(
                    title: Text("Hi"),
                    content: Text(
                      textEditingController.text,
                      style: TextStyle(fontSize: 30.0),
                    ),
                    actions: <Widget>[
                      FlatButton(
                          onPressed: () {
                            _dialogResult("YES");
                          },
                          child: Text("YES")),
                      FlatButton(
                          onPressed: () {
                            _dialogResult("NO");
                          },
                          child: Text("NO")),
                    ],
                  );

                  showDialog(
                      context: context,
                      builder: (BuildContext context) => dialog);
                },
                child: Text("Click Me"),
              )
            ],
          ),
        ),
      ),
    );
  }
}