Flutter Navigator

아이고마워·2022년 7월 25일
0

Flutter

목록 보기
1/1

1. 기본 Navigator

TextButton(
	child: Text('push navigate'),
    onPressed: (){
    	Navigator.push(context,
			MaterialPageRoute(
				builder: (_) => SecondPage()
			)
        )
    }
)

Navigator.push(context, builder: (_) => SecondPage()) 부분이 핵심입니다.
여기서 잘못된 context 전달로 제대로 작동하지 않을 수 있습니다.

class SecondPage extends StatelessWidget {
  ...
  Widget build(BuildContext ctx) {
    return Scaffold(
        body: Center(
          child: ElevatedButton(
            child: Text('Back'),
            onPressed: (){
              Navigator.pop(ctx);
            },
          ),
        )
    );
  }
}

다시 되돌아갈때는, Navigator.pop(context)를 통해 구현할 수 있습니다.

2. MaterialApp Navigator

MaterialApp() 내부에서 라우트를 지정할 수 있습니다.

MaterialApp(
	initialRoute: '/',
    routes: {
    	'/a': (context) => ScreenA(),
        '/b': (context) => ScreenB(),
        '/c': (context) => ScreenC()
    },
    home: ScreenA()
)
class ScreenA extends StatelessWidget {
  ...
  ElevatedButton(
  	child: Text('Go to B')
  	onPressed: (){
  		Navigator.pushNamed(context, '/b');
  	}, 
  ),
}

Navigator.pushNamed()를 통해 MaterialApp()에서 지정한 라우트로 이동할 수 있습니다.

0개의 댓글