Flutter_08. AlertDialog, Navigator, Routing, PushNamed

Flutter는 화면 간 탐색 및 딥 링크 처리를 위한 완전한 시스템을 제공한다고 한다.

내비게이션과 라우터를 이용한 화면 이동을 복습해보겠다 :) 자세한 내용 및 추가적인 레시피는 아래 링크에서 확인!

 

https://docs.flutter.dev/ui/navigation

Navigation and routing

 

https://docs.flutter.dev/cookbook#navigation

Cookbook

 

 

 

 

GestureDetector, onTap, AlertDialog

 

 

 

1) lib에 폴더 만들고, dart 파일 신규 생성 - 기본 화면 셋팅

 

 

2) body에 GestureDetector 추가

GestureDetector
- onTap: () => 호출할 함수
- child: cont Text('출력할 문구')

 

 

3) AlertDialog 함수 생성하고 showDialog();

_showAlertDialog(BuilderContext context){}
- showDialog(context: context, builder: builder);

 

 

4) builder에 return AlertDialog();

showDialog();
- context: context
- builder: (BuildContext ctx){
      return AlertDialog();
   }

 

 

5) AlertDialog 기본 레이아웃 셋팅

AlertDialog();
- 칼라 backgroundColor: const Colors.원하는칼라
- 제목 title: const Text('다이어로그 제목 문구')
- 내용 content: const Text('다이어로그 내용 문구')
- 버튼 actions: [버튼, 버튼, ...]

 

 

6) AlertDialog 버튼 셋팅

actions: []
- Center > Row > TextButton

 

 

7) 저장하고 AlertDialog 출력 확인

버튼 클릭 시 아무런 이벤트가 없기 때문에, [예][아니요] 버튼을 클릭해도 AlertDialog가 닫히지 않음

 

 

8) 버튼에 Navigator pop() 추가

 

 

 

9) 저장하고 AlertDialog 출력 및 닫힘 확인

 

 

 

10) showDialog에 barrierDismissible와 barrierColor 설정

showDialog();
- barrierDismissible: true //Alert 외 영역 터치시 닫기 허용 
- barrierColor  //Alert 출력시 BG칼라 
- context: context
- builder: (BuildContext ctx){
      return AlertDialog();
   }

 

 

11) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 화면 확인

 

 

 

 

 

 

 

 

 

Page, Routing, Navigator, PushNamed

 

 

 

1) main.dart 파일에 Routing 셋팅

 

2) 별도 page 파일 2개 생성하고 기본 셋팅

//appBar 타이틀과 body에 텍스트 문구만 다르고 동일 코드

 

3) main.dart 파일에 생성한 2개 페이지 Routing 셋팅

 

 

4) home.dart 파일에 AlertDialog 버튼 클릭시 이벤트로 페이지 이동 pushNamed 설정 

Navigator.of(ctx).pop();
Navigator.pushNamed(context, '/1st');

 

 

5) 저장하고, 페이지 이동 확인

 

 

 

 

반응형