[Navigator] Flutter

Stack 

 

Navigator 는 Flutter에서 단순히 Page간의 이동 뿐만 아니라 1번 Page에 있는 Data를 2번 Page로 넘겨주는 역할을 합니다. 

Navigator를 이해하기 위해서는 Stack 과 Queue를 알아야 합니다. 

 

 

 

Flutter의 Page는 기본적으로 Stack 구조를 가지고 있습니다.

 

33333333. :  3번 Page 

22222222. :  2번 Page

11111111111  :  1번 Page

00000000 :   0번 Page

 

Stack의 특징으로는 

• 한방향으로만 쌓는다. 위에 표시한 것과 같이 0번 Page에서 3번 Page 방향으로만 쌓을 수 있음
• Top 즉 가장 높은 Page에서부터만 접근이 가능, 위 예시로는 3번 Page에서부터 접근
• 최상단의 Page = 최신 Data  
• Stack의 개념에서 Push는 Page를 쌓아올리는 "+ " 이고 , Pop는 Page를 제거하는 " - " 
• 후입선출  -> 가장 나중에 들어온 Data가 먼저 나감

Stack 활용으로는 

• 평상시 웹 서핑을 할 때 , 뒤로 가기를 누를 때 (Pop  "-") -> 가장 나중에 열린 Page로 이동
• 역순 문자열을 사용할 때 
• 실행 취소 -> 가장 최근에 생긴 event를 취소 할 때 

---

Queue

Queue는 Stack과 달리 양방향에서 작업이 가능한 구조 입니다. 방향에 따라 정해진 역할을 가지고 있습니다. 

 

 

                                       데이터 입력 방향

                            ------------------->>>>>>>>  (0번 Data가 가장 늦게 입력된 Data)

        Rear                                33333           22222           111111         000000                Front

   삽입연산만 가능(+)               3번Data       2번Data       1번 Data          0번 Data            삭제만 가능(-)

       인큐                                                                                                                                  디큐

 

 

 

Queue의 활용 

• 우선순위가 같은 작업예약
• 은행 업무
• 프로세스 관리 
• 너비 우선 검색 
• 선입선출 

 

 

Stack과 Queue의 대해 

Stack은 프론트 엔드, 화면을 구성 할 때 많이 쓰이고 

Queue는 백엔드 , 데이터 진행, 프로세스 관리에 많이 쓰일 것 같습니다. 

 

---

Flutter의 Stack --> Navigator 사용법 

 

1. 기본적인 사용법 

Navigator.of(context).push     Stack(+)

Navigator.of(context).pop       Stack(-)

 

2. Named 사용법 

    가. Material 위젯 안에 home: 대신  initialRoute : 를 만든다. 그리고 Page를 생성한다. 

        예) initialRoute : HomePage, FirstPage, SecondPage 

          해당 페이지로 이동할 시  Navigator.of(context).pushnamed('/FirstPage');

 

---

Navigator 를 사용해서 Data 전달 

 

 

 1 -1 . FirstPage의 Data를 SecondPage로 전달시키는 함수

이벤트를 발생 시킬 곳에 아래 함수를 입력한다. 

Material PageRoute (builder : context => Secondpage(data))

 

 

1- 2. SecondPage에서 FirstPage의 Data를 받을 때 상황 2가지 

 

   가. SecondPage가 Stateless위젯일 때 

       데이터를 받을 곳에  "data : $data"

   나. SecondPage가 Stateful위젯일 때 

       데이터를 받을 곳에   {$widget.data}

 

    

2.SecondPage의  Data를 FirstPage로 전달 시키는 함수 

 

SecondPage에서 쓰는 함수 

Navigator.pop(context, return(data))

 

 

FirstPage에서 데이터를 받을 때 

 

async {

returnData = await Navigator.push(context, MaterialRoute (builder : (context))-> SecondPage(data))

 

if (returnData != null {

pring("modified : $returnData")})

}

 

--> await로 SecondPage에서 FristPage로 보내는 데이터를 기다려야 하기 때문에 async를 사용한다. 

 

페이지간의 데이터를 이동 할 때 주의할 점은 데이터 타입이 일치하여야 한다. 

 

---

VillpopScope

데이터 로직을 구현, 화면 이동을 타이머를 설정해서 조절할 수 있다. 

구글 AD광고가 이렇게 사용 되는 듯 

 

---

모든 Navigator는 반드시 Route를 거친다.