Flutter Navigator/context 퀴즈
- 퀴즈 첫번째 사진을 통해 push method를 이용해 ScreenA 라우터를 불러오는 기능을 구현함.
- 퀴즈 두번째 사진을 통해 ScreenA 위젯도 오류 없이 구현함.
하지만 버튼을 누르면 페이지 이동이 되지 않는다. 왜 그럴까?
>> 왜 퀴즈 주세요..ㅜㅜ
<나의 풀이>
우선, 실행 시 다음과 같은 오류가 뜸.
Navigator operation requested with a context that does not include a Navigator.
(= 네비에 포함되지 않은 context로 요청된 네비 오퍼임.)
정말 모르겠어서 구글하면서 해보는데 너무 무서운 오류 뜸...
무서워서 우선 걍 넘어갈래.. 못 풀겠어요
순한맛 24 강의 끝에 풀이
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) { // 2.MyApp 위젯의 context를 사용하고 있기 때문
return MaterialApp(
home: Center(
child: TextButton(
child: Text('Go to ScreenA'),
onPressed: () => Navigator.push(context, MaterialPageRoute( // 1. push의 context가
builder: (context) => ScreenA()))
),
),
);
}
}
class ScreenA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Hi, there!'),
));
}
}1. push의 context가
2. MyApp 위젯의 context를 사용하고 있기 때문에 실행이 안됨.
위젯트리 구조상 모든 위젯을 MaterialApp이 감싸고 있어야함.
== 모든 위젯은 MaterialApp의 Child 위젯!
그런데 push 함수의 context는 MyApp 위젯의 위치정보만을 가지고 있고 MaterialApp이 존재하지도 않는 이곳에 새로운 route를 보낼 수 없는 것.
?????????????????????????????? 이해가 안 감
해결방법 1. push 함수가 MaterialApp 위젯에 child 위젯의 context를 사용
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context) {
return MaterialApp( // 1)MyApp 위젯에서 MaterialApp 위젯 생성
home: MyPage() // 2)home에서 MyPage 위젯 호출
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) { // 4)Mypage의 context를 사용하면
return Scaffold(
body: Center(
child: TextButton(
child: Text('Go to ScreenA'),
onPressed: () => Navigator.push(context, MaterialPageRoute( // 3) push 메소드가
builder: (context) => ScreenA())),
),
),
);
}
}
class ScreenA extends StatelessWidget { // 5) 새로운 route인 ScreenA를 쌓아올릴수 있음.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Hi, there!'),
));
}
}
블로그를 몇개 참조했는데도 이해를 못하는 나는 context를 다시 봐야할듯 하다..
해결방법 2. MaterialApp 위젯 밑에서 새로운 context를 할당할 수 있는 Builder 위젯 사용
(공부 후, 재시도 예정)