Flutter Widget 사용법2 (Route)

안녕하세요 무사도입니다.

 

지난 글에서 우리는 Flutter 의 "버튼"과 "Text"에 대해서 알아봤습니다. 

2021.11.23 - [개발자로그/Flutter] - Flutter Widgets 사용법 (Button) 사용법

 

이어서 또하나의 위젯인 route 를 설명해 보고자 합니다.

 

1. route 화면을 구성하는 하나의 Page 단위의 Widget 입니다.

 - android의 activity, iOS 의 ViewController 와 같습니다.

 - 다들 아시겠지만 모바일 앱에서는 화면이 하나이기 때문에 뷰 전환이 필연적으로 일어납니다.

 - 이것을 도와 주는 위젯은 Navigator 입니다. 

 

2. Route 안에 각 Widget 을 배치 하고 표시 합니다.

3. Naviagtor 의 Push 와 Pop 기능을 이용해 화면을 불러오거나 이전 화면으로 돌아갈수 있습니다.

 

4. 사용법

   4-1. Navigator.push(   context,    MaterialPageRoute(builder: (context) => ListWidget()),);},
    child: Text("다음 화면으로 넘어가기")

   4-2. Navigator.pop(context,);},
    child: Text("이전 화면으로 돌아가기")

 

으로 사용 하게 됩니다.

 

실제 코드 샘플은

flutter 쿡북에서 샘플을 참조하였습니다.

https://flutter-ko.dev/docs/cookbook/navigation/navigation-basics

이를 이용한 샘플 소스는 다음과 같이 작성해 보았습니다.

https://github.com/LeeKwnagWoo/FlutterTest