[Flutter] 화면전환 Navigator operation requested with a context that does not include a Navigator

Flutter 화면 전환에 대해 간단하게 알아보겠습니다.

Navigator push/pop

 

Navigator에 대해서 간단하게 살펴볼까요?

 

---

 

 

Navigator.push

ex => 버튼 클릭 시  MyStateful 페이지로 이동

ElevatedButton(onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => MyStateful(title: 'Stateful'))
                );
              }, child: const Text('Stateful')),	//ElevatedButton

 

 

Navigator.pop

페이지 닫기

ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('pop')
            ), //ElevatedButton

 

---

main.dart

 

 

오류 발생 소스 샘플

import 'package:flutter/material.dart';
import 'package:study/ui/full_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Main'),
        ),
        body: Padding(
          padding: const EdgeInsets.only(top: 20),
          child: Column(
            children: [
              ElevatedButton(onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => MyStateful(title: 'Stateful'))
                );
              }, child: const Text('Stateful')),
              ElevatedButton(onPressed: () {

              }, child: const Text('Stateless'))
            ],
          ),
        ),
      ),
    );
  }
}

 

저와 같이 기본 예제 코드에서 간단하게 수정하려다 보니

위와 같은 widget 구조로 구현한다면 다음과 같은 오류코드를 만나게 됩니다.

 

Navigator operation requested with a context that does not include a Navigator.

 

 

 

원래 정상 작동했었는데 갑자기 왜 오류가 발생하지 하신다면 아마도

간단하게 테스트하려고 기존과 widget 구조가 달라서 그럴 겁니다.

 

Navigator을 사용할 때, 파라미터로 context 객체를 사용하는데

widget 구조가 달라 Navigator 사용 가능한 context 객체를 받지 못하는 것 같습니다.

 

---

 

----------------------------------------------------

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

 

Widget build(BuildContext context) {
  return MaterialApp(

         ...

              Navigator.push( 

                      context,

----------------------------------------------------

위와 같은 구조를

 

아래와 같이 변경

----------------------------------------------------

void main() => runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyApp(),
    ));

 

Widget build(BuildContext context) {
  return Scaffold(

         ...

              Navigator.push( 

                      context,

----------------------------------------------------

 

 

오류 수정 소스 샘플

import 'package:flutter/material.dart';
import 'package:study/ui/full_page.dart';

void main() => runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyApp(),
    ));

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main'),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 20),
        child: Column(
          children: [
            ElevatedButton(onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyStateful(title: 'Stateful'))
              );
            }, child: const Text('Stateful')),
            ElevatedButton(onPressed: () {

            }, child: const Text('Stateless'))
          ],
        ),
      ),
    );
  }
}

 

 

---

여기까지 저의 긴 글을 읽어주셔서 감사합니다.

제가 습관적으로 코딩을 하는 그날까지 습관적으로 코딩을 하기 위해 글 작성을 꾸준하게 해보겠습니다.