이번 시간에는 우리가 만든 앱에서 노트 목록 페이지에서 새 노트를 작성할 수 있도록 버튼을 추가하고 목록 화면과 편집 화면을 연결해 보도록 하겠습니다.
노트 목록 페이지와 노트 편집 페이지 연결하기
먼저 노트 리스트 페이지를 열어주세요. 노트 리스트 페이지에서 편집 페이지로 갈 수 있도록 버튼을 추가해 보도록 하겠습니다. 이를 위해 FloatingAction 버튼을 활용해 보도록 하겠습니다.
노트 리스트 페이지 state클래스 내부에 Scaffold로 이동한 후, 여기에 FloatingAction 버튼 속성과 위잿을 아래와 같이 추가해 주세요.(아이콘, 새노트라는 이름의 tooltip, 버튼이 눌렸을 때 동작도 지정하기위해 routeName은 NoteEditpage로 하면 버튼 구성은 모두 끝이 납니다.)
노트를 저장하는 SaveNote 함수 수정하기
다음으로 노트 편집 페이지로 이동합니다. saveNote() 함수로 이동을 해서 살펴보면 노트를 저장한 후 아무런 동작도 하지 않는 것을 확인할 수 있습니다.
노트를 저장했다면 이전 화면인 노트 목록 화면으로 돌아가야 하므로, Navigator.pop(context); 를 이용해 노트 목록 화면으로 다시 돌아갈 수 있도록 추가해 주세요.
목록 화면과 편집 화면을 연결 확인하기
이것으로 화면 연결 작업을 모두 마무리 하였습니다. 화면이 제대로 연결되어 동작 되는지 확인해 보도록 하겠습니다. 안드로이드 에뮬레이터를 실행해 주세요.
에뮬레이터를 실행하면 왼쪽 아래 화면처럼 플러스 버튼(+)을 클릭해 노트를 새로 추가해 보겠습니다.
실제로 노트에 내용이 작성이 되는지 가운데 화면처럼 임의의 텍스트를 입력해 주세요.
마지막으로 오른쪽 상단에 저장버튼을 눌러 노트 목록화면에 돌아와 내가 작성한 노트가 재대로 동작하는지 확인해 주세요.
노트 추가버튼
오른쪽 하단에 새 노트를 추가 할 수 있는 + 버튼을 눌러주세요.
Test 입력 되는지 확인
임의의 제목과 텍스트를 입력해 보도록 합니다. 잘 입력이 되었다면 오른쪽 상단에 색상도 변경해 본 후 저장버튼을 눌러주세요.
저장 여부 확인
저장이 잘 되었는지 확인해 보세요.
기존에 작성되어 있는 노트 편집 기능 구현하기
프로젝트 창에서 노트편집.다트 파일을 열어줍니다.
먼저 기존에 작성된 노트를 편집하려면 어떤 노트를 편집할 것인지에 대한 정보를 받아와야 합니다. 노트뷰 페이지에서 했던 방식과 동일하게 Index를 받아오는 방식으로 구현해 보도록 하겠습니다.
그런데 기존에 만들었던 노트편집 페이지 클래스는 새 노트를 만드는 경우만 지원하고 있습니다. 따라서 새 노트를 만들 때와 마찬가지로 기존 노트를 수정하는 경우에도 모두 편집이 가능하도록 수정하기 위해, 인덱스 정보를 필요할 때만 받도록 코드를 추가해야 합니다.
새 노트를 만드는 경우는 노트 인덱스를 전달하지 않으므로 index의 값이 null이 되도록 합니다. 이를 사용하면 노트 편집 페이지가 새 노트 작성 모드에서 열렸는지, 아니면 기존 노트 편집 모드로 열렸는지 알 수 있습니다.
또, 노트 편집모드로 화면을 호출해 열었을 때 선택한 노트의 제목과 본문 그리고 색상이 화면에 반영이 되도록 해야 합니다. 이를 위해 화면이 최초로 생성되었을 때 호출되는 함수인 initState 함수를 Override 해 줍니다. initState 함수 내에서는 super.initState() 함수를 호출해서 함수가 실행이 되었을 때 기본으로 실행이 되는 값을 지정해 주도록 하겠습니다.
인자로 받은 노트 인덱스 정보를 가지고 와서 만약에 받은 인자가 있다면 노트 정보를 가지고 오도록 하고, 이 노트 정보를 화면에 반영해줍니다.
다음으로 saveNote() 함수를 수정해 줍니다. 지금은 saveNote() 함수가 무조건 새 노트를 추가하도록 되어있습니다.
기존의 노트를 편집하는 중이라면 추가가 아니라 노트를 수정하도록 변경해야 합니다.
일단 노트의 객체를 별도의 객체로 만들어 줍니다. final note = Note(……….)
다음으로 만약( if ) 인덱스가 null이 아니라면 기존 노트를 수정하고 있는 것이므로 노트의 인덱스 정보를 가지고 와 노트를 수정할 것이고,
그렇지 안다면(else) 새 노트를 추가해야 하므로 addNote(note) 를 호출해서 노트를 추가해 주도록 합니다.
노트 편집 화면을 호출할 때 인덱스 정보를 받을 수 있도록 수정이 되었습니다.
이제는 경로 설정에서 화면을 호출할 때 인덱스 정보를 넘길 수 있도록 수정해야 합니다. 이를 위해서 main.dart 파일을 연 다음 routes 부분을 수정합니다.
argument 정보를 받아서 화면을 호출할 때 이 argument 정보를 전달했는지에 따라서 인덱스를 추출할지 아니면 그대로 null 값을 전달할 지를 결정합니다.
마지막으로 NoteEditpage에 index 인자를 전달해 줍니다.
이제 노트 목록페이지로 이동해서 노트를 편집할 수 있도록 바꿔보겠습니다.
노트 목록페이지에서 buildCard() 함수로 이동합니다. 노트 목록에서는 각 목록을 Card로 표시하고 있는데요. 이 카드를 클릭할 수 있도록 하려면 Card를 InkWell 위젯으로 감싸주면 됩니다. 이를 위해 Card에 커서를 둔 다음에 Alt+Enter 를 누르고 Wrap with Widget을 선택한 다음 InkWell 을 입력해 주세요.
그리고 onTap 속성을 이용해서 화면을 클릭했을 때 일어나는 동작을 구현해 줍니다. 여기에서는 NoteViewPage를 이용해서 노트를 클릭했을 때 노트 내용을 자세히 볼 수 있도록 구현하려고 합니다.
Navigator.pushNamed 함수를 호출하고 context에 NoteViewPage.화면이름 을 넘겨주도록 하겠습니다. 그리고 NoteViewPage에서 돌아왔을 때 노트 정보가 변경되었을 수 있으므로 setState() 함수를 호출해서 화면을 갱신하도록 합니다.
NoteViewPage를 표시하려면 index 정보를 넘겨줘야 합니다. 따라서 buildCard 함수에 int index 인자를 하나 추가해 줍니다. 그리고 argument로 전달받은 index 정보를 그대로 넘겨 줍니다.
위쪽에 buildCards 함수에서 buildcard 함수를 호출할 때 전달받은 index 정보를 함께 넘겨주도록 수정해 주어야 합니다.
노트 목록을 별도의 변수로 뽑아줍니다. (final note = noteManager().listNotes();
목록을 생성할 때 인덱스 정보를 같이 받기 위해서 List.generate()함수를 사용합니다. 첫번째 인자로는 리스트의 길이를 넘겨주고(notes.length), 두번째 인자로는 _buildcard() 함수를 호출해서 index와 실제적인 노트정보(notes[index])를 함께 넘겨줍니다.
앱 기능이 잘 동작하는지 확인해 보기
앱이 실행되면 새로운 노트를 하나 생성합니다.
생성된 노트를 클릭해서 노트뷰 페이지로 이동이 되는지 확인합니다.
오른쪽 상단에 수정(연필모양)을 눌러 수정이 잘 되는지 확인합니다. 내용을 수정하고 저장을 눌러주세요.
마지막으로 노트를 삭제해 보겠습니다. 오른쪽 상단에 휴지통 모양의 아이콘을 눌러 노트가 잘 삭제되는지 확인해 주세요.
