Flutter Navigate

https://www.youtube.com/watch?v=DlArCl8jvlo&feature=youtu.be 

이번 글의 내용은 navigate이다.

flutter는 react native와 다르게 navigate를 기본으로 지원한다.

 

이번 내용은 정말 짧고 쉬워 syntax설명으로도 충분할 것 같다.

 

page 1에서는

Scaffold는 app bar를 넣을 수 있는 간단한 layer 또는 body라고 볼 수 있다.

 

floatingActionButton는 동그라미 버튼으로 글자와 아이콘을 버튼 위에 넣을 수 있다.

Flutter의 버튼은 4개로 구성돼 있는데, FlatButton, IconButton, RaisedButton, 그리고 floatingActionButton이 있다.

버튼을 눌렀을 때의 effect는 onPressed로 제어를 할 수 있으며, 

onPressed: () async {
          var navigationResult = await Navigator.push(
              context, new MaterialPageRoute(builder: (context) => Page2()));

위의 코드와 같이 MaterialPageRoute를 통해 다음 페이지로 넘어갈 수 있도록 할 수 있다.

 

showDialog으로 팝업을 구현할 수 있다.

비슷한 위젯으로는 AlertDialog도 있다.

반응형

 

page 2에서는

void _popNavigationWithResult(BuildContext context, dynamic result) {
    Navigator.pop(context, result);
  }

라는 함수를 구현하였다.

dynamic라는 변수가 눈에 띄는데, var와 다르게 변수의 종류를 말 그대로 동적으로 변환해가며 사용할 수 있다.

때문에 parameter로 값을 전달받을 때 유용하다.

 

Navigator.pop는 스택의 pop과 같이 뒤로 돌아갈 수 있다.

이전으로 돌아갈 때 위와 같이 parameter를 전달하며 돌아갈 수 있다.