No MaterialLocalizations found - MyApp widgets require MaterialLocalizations to be provided by a Localizations widget ancestor
This is because the context you are passing into the showDialog
method is a context
that doesn't yet have a MaterialLocalizations
widget in the widget tree, the MaterialLocalizations
widget gets added implicitly by the MaterialApp
widget.
To fix it, try the following:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Test",
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Test")),
body: Container(
child: Center(
child: RaisedButton(
color: Colors.redAccent,
textColor: Colors.white,
onPressed: () {
testAlert(context);
},
child: Text("PressMe"),
),
),
),
);
}
void testAlert(BuildContext context) {
var alert = AlertDialog(
title: Text("Test"),
content: Text("Done..!"),
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
});
}
}
An easy fix which worked in my case was simply to move the MaterialApp widget up to the main() method.
main() {
runApp(MaterialApp(home: App()));
}
This also happens when you switch to a language that is not supported by the GlobalMaterialLocalizations
delegate. It is a tricky message to understand, because it says that you should have the MaterialApp
at the top of your tree, but that may already be present.
In my case, the language I was localising (UK Welsh -- cy-GB
) is not catered for automatically. I had to write my own delegate for boilerplate strings, and add it to the list of localisations at the root of my app.
The code for the Belarusian delegate is here. I adapted it to cater for the Welsh language. It contains date formatting information, as well as about seventy stock phrases that material design thinks you may need, such as "SELECT ALL", "Page <x> of <y>" etc.
If you need to make a delegate that covers a language not listed in the global material localisations, then once you have created the delegate, look in your codebase, and somewhere near the top of the tree, you will have a line like
MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''), // English, no country code
const Locale('he', ''), // Hebrew, no country code
const Locale.fromSubtags(languageCode: 'zh')
],
// ...
)
Simply add CyMaterialLocalizations.delegate
(or whatever you call your new language delegate) to the localizationsDelegates
list.