[Flutter] Navigation, Route, Pop

Jinno·2023년 1월 3일
0

Flutter

목록 보기
2/19

1. Route

void main() {
  runApp(
    MaterialApp(      
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/one': (context) => RouteOneScreen(),
        '/two': (context) => RouteTwoScreen(),
      },
    ),
  );
}

2. Push

  • push, pushNamed로 이동하고, pop을 하면 현재 페이지로 돌아옴
    -- #1 -> #2(현재) -> #3 -> #2
  • pushReplacementNamed는 현재 페이지를 제거하고, 이동할 페이지로 대체함. 이동후 pop을 하면 전전 페이지로 복귀
    -- #1 -> #2(현재)가 삭제되고 #3 -> #1 (#3에서 pop을 하면 이전 stack인 #1로)
    	# push로 이동, number: 123으로 값 전달
		ElevatedButton(
          onPressed: () async {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (_) => RouteOneScreen(number: 123),
              ),
            );            
          },
          child: Text('Push'),
        )
        
   		# pushNamed로 이동    
   		ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushNamed(
              '/two',
              arguments: 999,
            );
          },
          child: Text('Push Named'),
        ),
   
   		#pushReplacementNamed로 이동
   		ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushReplacementNamed(
              '/two',
            );
          },
          child: Text('Push Replacement'),
        ),

3. pop

  • push, pushNamed로 이동하고, pop을 하면 현재 페이지로 돌아옴
	#pop
    ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Pop'),
        ),
    
    #pop with data
    ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop(123);
          },
          child: Text('Pop with Data'),
        ),
    
    # pop해서 보여지는 페이지에서 데이터를 받는 법
    ElevatedButton(
          onPressed: () async {
            final result = await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (_) => RouteOneScreen(number: 123),
              ),
            );            
          },
          child: Text('Push'),
        )    

4. canPop, maybePop

  • canpop: pop할 수 있는지를 확인
  • maybePop: pop할 수 있으면 이동
 		#canPop
    	ElevatedButton(
          onPressed: () {
            print(Navigator.of(context).canPop());
          },
          child: Text('Can Pop'),
        ),
        
        #maybePop
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).maybePop();
          },
          child: Text('Maybe Pop'),
        ),
profile
Innovation, 기록용

0개의 댓글