[Flutter] 6 화면 이동하기 - by 코딩셰프

 

 

 

 

 

 

MaterialApp의 initialRoute 와 routes 속성에 주목해보자.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title: 'Multiple Screen',
      // theme: ThemeData(primarySwatch: Colors.red),
      initialRoute: "/",
      routes: {
        '/' : (_) => screenA(),
        '/b' : (_) => screenB(),
        '/c' : (_) => screenC(),
      },
    );
  }
}

 

위와 같이 설정하면,제일 처음 띄워지는 화면은 screenA() 가 될 것이다.

 

 

screenA.dart()

void main() => runApp(screenA());

class screenA extends StatelessWidget {
  const screenA({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScreenA"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
                onPressed: (){
                  Navigator.pushNamed(context, '/b');
                },
                child: Text("Go to ScreenB")
            ),
            ElevatedButton(
                onPressed: (){
                  Navigator.pushNamed(context, '/c');
                },
                child: Text("Go to ScreenC")
            )
          ],
        ),
      ),
    );
  }
}

 

 

screenA() 에서는 2개의 버튼을 통해 screenB 혹은 screenC 화면으로 이동할 수 있다.

 

 

 

 

퀴즈!

아래의 앱에서 TMP로 이동할 수 없는 이유는 무엇일까요? 그리고 어떻게 하면 고칠 수 있을까요?

 

 

해당 코드에서 Navigator.push가 TMP로 이동하지 않는 이유는 context가 MaterialApp의 하위 트리에 포함되어 있지 않기 때문입니다. Navigator는 MaterialApp 내에서 사용되어야 하는데, 현재 Center 위젯의 context는 MaterialApp의 하위 트리가 아닙니다!

 

Solution 1. 하위 트리로 이동.

 

 

 

Solution 2. Builder 메소드 활용

 

다음과 같이 Builder 위젯을 사용하면(Builder는 MaterialApp의 하위 위젯이다) 

해당 context를 사용하여 MaterialApp의 하위 위젯 트리로 위치시킬 수 있게 됩니다!