Flutter Error) no materiallocalizations found.

 

Error

 ShowDialog 를 사용하려는데 에러가 났다.

StatefulWidget을 사용하여  ShowDialog를 보여주려는데 자꾸 다음과 같은 에러가 난다.

플러터 공식 홈페이지 예제를 보면 StatelessWidget 기준으로만 있어서 한참을 해맸다...

══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No MaterialLocalizations found.
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

 

버튼을 누르면 다이얼로그가 떠야하는데 에러 발생

---

해결 방법

에러가 났던 소스코드를 최대한 축약하자면 다음과 같다.

에러가 발생한 소스 코드

import 'package:flutter/material.dart';

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

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    content: Text('ShowDialog Text'),
                  );
                },
              );
            },
            child: Text('ShowDialog'),
          ),
        ),
      ),
    );
  }
}

---

정상 작동하게 수정한 소스 코드

1. 메인 앱인 'MyApp' 의 상속을  StatelessWidget 으로 변경해준다.
2. 'MyApp'에 MaterialApp 을 리턴하고 내용에 연결할 클래스를 지정해준다. (home: MyHomePage)
3. 연결할 클래스 'MyHomePage'를 StatefulWidget 으로 상속해준다.
4. MyHomePage 클래스에서 상태 변경 가능 상태로 변경한다. (createState() ~)
5.  상태 변경이 가능한 클래스를 정의하여 Scaffold 의 내용을 구성한다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  content: Text('ShowDialog Text'),
                );
              },
            );
          },
          child: Text('ShowDialog'),
        ),
      ),
    );
  }
}

---

작동 확인

• 실행 화면

 

• 버튼을 누르면 다이얼로그 출력