Flutter에서 Navigator를 이용한 화면 전환 기능 구현하기

안녕하세요

 

이번 포스팅에서는

Flutter에서 Navigator를 이용해 화면을 전환하는 기능을

구현해 보겠습니다.

 

먼저,

Navigator를 사용하기 위해서는 MaterialApp 위젯이 필요합니다.

 

MaterialApp 위젯은 앱의 최상위 위젯으로, Navigator를 포함하고 있습니다!

 

 

 

우선 새로운 dart파일을 만들어준 뒤

기본적인 MaterialApp 위젯의 구조를 만들어줍니다.

 

 

 

 

위와 같이 MaterialApp 위젯을 작성해 주었습니다.

 

이제 Navigator를 사용하여 화면을 전환해 봅니다.

Navigator.push 메서드를 사용하면 새로운 화면을 스택의 맨 위에 추가할 수 있습니다.

 

 

 

이렇게 작성을 해줍니다.

 

여기서 'Test()'는 새로 이동할 화면의 위젯입니다.

 

저는 test.dart를 새로 만든 뒤,

Test 위젯을 작성해 주었습니다.

 

작성을 완료해 주면 ElevationButton을 통해 test라는 버튼이 생성되고,

클릭하면 test.dart의 Test() 위젯으로 이동하게 됩니다.

 

 

 

test.dart의 Test()로 이동

 

 

이렇게 Flutter에서는 Navigator를 사용하여 앱 내 여러 화면 간에 이동을 할 수 있습니다.

 

Navigator에는 push 외에도 pop, pushReplacement, pushNamed, popUntil 등의 기능들이 있습니다.

 

앱의 요구 사항에 맞게 화면 전환 로직을 구현하면 되겠습니다.

 

함께 Flutter에 대한 지식을 쌓아서 좋은 앱을 만들어보아요

 

화이팅팅