이번 포스팅에서는 안드로이드 스튜디오를 활용해서 노트 데이터를 저장하는 기능을 구현해 보도록 하겠습니다.
지금까지 노트 작성 화면을 구성해 보았습니다. 관련 내용이 궁금하신 분들께서는 이전 포스팅에서 작성했던 글을 참고해 주시면 됩니다.
지난 시간까지 작성했던 프로젝트를 안드로이드 스튜디오에서 불러와 주세요.
노트 데이터를 관리해주는 NoteManager 클래스 만들기
먼저 노트 데이터를 관리해주는 NoteManager 클래스를 만들도록 하겠습니다. 프로젝트 창에서 Data 폴더를 우클릭 한 다음 Dart 파일을 선택해 주세요.
그리고 note_manager.dart 파일을 생성합니다.
📌 노트 데이터를 저장할 공간인 List<Note> _notes를 추가합니다.
📌 노트를 관리해줄 함수들을 추가합니다.
- void addNote(Note note) : 노트를 추가하는 함수입니다. 새로 추가할 노트 데이터를 리스트에 추가함
- void deleteNote(int index) : 노트를 삭제하는 함수. 인자로 Index를 받는데요. 인덱스에 있는 정보 삭제
- Note getNote(int index) : 특정 인덱스에 있는 노트 정보를 반환하는 함수
- List<Note> listNotes() : 현재 저장되어 있는 모든 노트 리스트를 반환하는 함수
- void updateNote(int index, Note note) : 노트 정보를 업데이트 해주는 함수
단 하나의 노트 매니저 클래스만 사용하게 만들어주기 (providers.dart)
노트의 목록 화면과 작성 화면에서는 동일한 노트를 공유해야 합니다. 때문에 노트의 목록을 담고 있는 noteManager 클래스 또한 앱 내에 단 하나만 존재해야 합니다. 이를 위해서 noteManage 클래스의 생성과 접근을 관리하고 단 하나의 인스턴스만 존재할 수 있게 해주는 별도의 솔루션을 구현해 보도록 하겠습니다.
Lib 폴더 우클릭 -> dart 파일 선택 -> providers.dart 파일 생성
📌 노트 매니저 클래스의 인스턴스를 저장할 공간 (NoteManager? _noteManager)를 추가합니다.
📌 noteManager() 함수를 추가하여 노트 매니저의 인스턴스가 생성되어있다면 기존의 인스턴스를 반환하고, 그렇지 않으면 새로운 노트 매니저를 생성한 다음 반환하도록 합니다.
노트 작성 화면에서 노트 저장 기능 구현하기
note_list_page.dart 파일을 열어주세요. 여기서 _buildCards()에 임시로 넣어 놓았던 노트 내용을 모두 삭제해주세요.
그다음 notes를 noteManager().listNotes() 로 바꿔서 noteManager 클래스를 통해서 노트 목록을 받도록 수정하겠습니다.
다음으로 note_edit_page.dart 파일을 열어주세요.
AppBar 영역으로 이동해서 메뉴를 하나 더 추가하겠습니다. 배경색 선택 메뉴와 아이콘을 추가합니다. 아이콘은 저장 아이콘을 사용하도록 하겠습니다. onPress 속성에는 일단 null 값을 넣어 놓습니다.
이어서 저장 버튼을 눌렀을 때 호출할 saveNote 함수를 구현하도록 하겠습니다. 제일 하단으로 내려와서 applyColor 함수 밑에 saveNote() 추가해 주도록 하겠습니다.
마지막으로 AppBar에서 onPressed 항목에 saveNote() 함수를 호출하도록 설정해 줍니다.
앱을 실행해서 제대로 동작하는지 한번 확인해 보도록 하겠습니다.
앱이 실행되면 오른쪽 상단에 저장버튼이 추가되는 걸 확인할 수 있습니다. 아무것도 입력하지 않은 상태에서 저장 버튼을 누르면 아까 설정한 오류 메시지가 표시되는 것도 확인할 수 있습니다.
지금은 노트 편집 화면만 보이고 있고, 노트가 잘 저장 되었는지 확인할 방법은 없습니다. 따라서 노트를 저장한 후에 노트 화면을 표시하도록 해야합니다. 이를 위해서는 노트 목록 화면과 작성 화면을 연결해야 합니다.
다음번에는 노트 목록화면을 다시 앱의 첫 화면으로 만들어 보도록 하겠습니다.
그리고 플로팅액션 ( + ) 버튼을 누르면 사용자가 새로운 노트를 작성할 수 있도록 만들어 보도록 할께요.
마지막으로 작성된 노트를 조회하는 화면을 추가하고 편집 혹은 삭제할 수 있도록 구성해 보면서 프로젝트를 마무리 짓도록 하겠습니다.
