안드로이드 스튜디오 노트 목록 화면과 작성 화면 연결하기
이번 시간에는 앱 내에서 여러 화면을 이동할 수 있도록 화면 경로를 구성하는 방법을 알아보도록 하겠습니다. 지난 시간까지 우리가 만든 앱은 노트 목록을 보여주는 화면과, 노트를 작성할 수 있는 화면으로 구성되어 있습니다.
플러터APP 에서는 화면을 이동하는 방법이 몇 가지가 있습니다. 그 중에서 가장 대표적인 방법은 각 화면에 이름을 붙이고 이를 활용하여 이동하는 방법입니다.
지금부터 각 페이지에 이름을 붙이고 화면을 이동하는 방법을 직접 따라해 보도록 하겠습니다.
각 페이지에 이름 부여하기
note_list_page.dart 파일을 열어준 다음 routeName이라는 함수를 만들어 줍니다. 플러터에서 화면 경로는 슬래시(/)로 시작합니다. 여기서는 노트 목록화면을 앱의 시작 화면으로 정할 것이라서 슬래시(/) 만 있고 뒤에는 아무것도 붙이지 않도록 합니다.
마찬가지로 note_edit_page.dart로 이동하여 페이지 이름을 지정해 줍니다. 이 화면의 이름은 edit으로 지정을 해 줍니다.
이것으로 화면 이름은 모두 지정해 주었습니다.
MaterialApp에서 화면 경로 매핑하기
다음으로 화면을 각 페이지에 연결해 주는 작업을 해보도록 하겠습니다. 화면 경로를 연결하기 위해서 main.dart 파일을 열어 주세요.
화면의 이름과 화면 클래스를 연결해주어야 화면 이름을 사용하여 화면을 전환할 수 있습니다.
MaterialApp의 속성 및 값을 다음과 같이 지정합니다.
- initialRoute: NoteListPage.routeName
- 앱의 첫페이지를 지정합니다. notelistpage를 보여주기위해 다음과 같이 매핑합니다.
- 홈속성은 삭제!! 홈속성과 initialRoute 속성은 함께 사용할 수 없다.
- routes: NoteListPage와 NoteEditPage를 매핑합니다.
- routes 속성을 사용해서 화면의 경로를 매핑하는 작업입니다.
- 화면의 경로 이름과 화면과 연결할 페이지를 쌍으로 지정해 주는 작업입니다.
노트 보기 화면 (NoteViewPage) 추가하기
이제 노트 목록 화면과 노트 편집 화면을 연결해 주어야 합니다. 노트를 보고 수정 삭제를 할 수 있는 새로운 화면을 하나 더 만들어 보도록 하겠습니다.
- Page 창 -> 마우스 우클릭 -> dart 파일 선택 -> note_view_page.dart 파일을 새로 만들어 줍니다. 그리고 NoteViewPage 클래스를 만들어 줍니다. 그리고 가장 먼저 화면 이름(/view)을 설정해 줍니다.
- 이 화면에서는 노트의 상세 내용을 노트 매니저를 통해서 불러와 보여줄 것이므로 어떤 노트에 있는 정보만 알고 있으면 됩니다. 따라서 인덱스 정보(index)만 추가해 줍니다.
- 그리고 클래스를 생성할 때 인덱스 정보를 함께 전달할 수 있도록 생성자(NoteViewPage(this.index);를 함께 추가해 줍니다.
- 다음으로 상태 정보를 관리하는 클래스를 지정하는 CreateState() 함수(ctrl + I) 를 추가합니다.
이어서 노트 뷰 페이지의 상태를 반환하는 NoteViewPageState 함수를 작성하도록 하겠습니다.
- 먼저 화면을 구성하는 함수인 Build class 함수(Ctrl + I)를 만들어 주고, 다른 함수와 마찬가지로 Scaffold로 첫화면을 구성합니다.
- 화면을 구성해야 하는데, 화면에 표시할 노트정보를 받아오기 위해서 note_manage 클래스에 getNote() 함수를 사용해서 노트정보를 받아옵니다. 여기서 index를 활용했으므로 index를 활용해서 노트정보를 받아오면 됩니다.
- Scaffold 하단에 화면구성을 하기위해 AppBar를 추가합니다. 노트 제목을 넣어주고 비어있다면 제목없음을 입력합니다.
- Action 버튼으로 편집버튼과 삭제버튼을 추가합니다.
다음으로는 메인 화면을 구성해 보도록 하겠습니다. AppBar 하단에 노트편집화면에서 구성했던 방식과 유사한 방식으로 배경색과 스크롤 처리가 모두 잘 동작하도록 화면을 구성하도록 합니다.
다른 부분은 노트 편집화면과 거의 동일하고 노트 본문은 텍스트 필드 대신 텍스트 위젯으로 표시하는 부분만 달라집니다.
이제 노트를 편집하고 삭제하는 함수만 추가하면 마무리 됩니다.
노트 편집 _ Widget Build 다음 밖에서 작성
- 노트 편집페이지를 호출하면서 노트 인덱스를 그대로 보여줄 것이므로 함수의 인자로는 index를 넣어줍니다. 여기서는 화면을 전환해야 하는데 플러터에서 화면을 전환할 때는 Navigator.pushNamed(이동할 화면 이름을 넣어줌)을 사용합니다. 여기서는 NoteEditPage의 이름을 넣어주면 됩니다. 그리고 노트와 관련된 정보를 넘겨주기 위해 argunents 속성에 함수 인자로 받은 index를 넘겨줍니다.
- 다음으로 편집이 끝났을 때 편집이 끝난 화면으로 대체해 주어야 하는데요. .then을 추가해서 여기에 인자로 들어가는 함수안에 setState() 함수를 실행해서 화면을 갱신해야 합니다.
노트 삭제
노트를 삭제하기 전에 삭제 확인을 한번 더 해주기 위해 _confirmDelete 함수를 추가하고 마찬가지로 함수 인자로는 index 값을 받아옵니다.
노트를 삭제하기 전에 사용자에게 화면을 표시하는 다이얼로그를 설정합니다. showDialog() 함수를 추가합니다. Builder에 AlertDialog() 함수를 이용해서 제목, 본문 메시지 정보를 입력합니다.
다이얼로그에 버튼을 추가하기 위해 action 위젯을 넣어줍니다. 취소버튼, 확인버튼을 추가합니다.
마지막으로 main.dart 파일을 열고 route 속성에 화면 보기 페이지를 등록해서 마무리 해 줍니다. NoteViewPage를 호출할 때 index 정보를 함께 넘겨주어야 하는데요. 이는 페이지를 호출 할 때 받은 argument 인자로부터 받을 수 있습니다. argument 인자에 접근하려면 아래 보는거와 같이 ModalRoute 를 사용해서 받아오면 됩니다. 그 다음 return에서 NoteViewPage를 생성하면서 위에서 받은 index를 넘겨주면 됩니다.
