내비게이션 기능을 이용하여 할 일을 기록하는 todo_list 앱을 구현해보았다.
- 아래 내용을 참고하여 SubDetail.dart, SecondDetail.dart, thirdPage.dart 페이지를 간단하게 만들어놓고 시작하였다.
내비게이션
한 페이지로도 앱을 만들 수 있지만 기능이 많으면 화면 구성이 어렵고 로딩이 느려지기도 한다. 내비게이션 기능은 앱이 제공하는 기능이나 메뉴별로 화면을 분리해서 개발하는 방법이다. - Fir
shinjoo95.tistory.com
할 일 보기 기능 만들기
- 리스트뷰에 할 일을 보여주는 기능을 구현하였다.
- InkWell 위젯은 탭, 더블탭, 롱탭 등, 다양한 터치 이벤트를 처리할 수 있다.
- pushNamed() 함수로 페이지를 이동하면서 첫 번째 인자로 지정한 경로로 두 번째 인자(arguments)로 지정한 데이터를 전달하는 코드이다. 경로를 'third'로 지정했으므로 세 번째 페이지로 이동하며 여기에 두 번째 인자로 전달한 todoList[index], 즉 사용자가 선택한 할 일(문자열)을 전달한다.
데이터를 받아서 처리하는 코드 작성
- args 변수에 *ModalRoute.of(context)!.setting.arguments.toString() 코드를 이용하여 두 번째 페이지에서 보낸 arguments값을 입력하고 이 값을 텍스트 위젯에 출력한다.
arguments의 값이 어떤 자료형인지 알 수 없으므로 as String으로 형변환한 다음 args에 배치하였다.
*라우터로 전달받은 데이터를 가져온다.
- 선택한 할 일이 세 번째 페이지에 표시된다.
할 일 추가 기능 만들기
- 첫 번째 페이지에서 플로팅 버튼을 눌렀을 때 동작하도록 구현
- 플로팅 버튼을 누르면 두 번째 페이지로 이동하고 여기서 반환하는 값을 저장해 할 일 목록을 추가하는 _addNavigation()함수를 정의한다. 이 함수는 데이터를 받은 다음에 처리해야 하므로 비동기 방식으로 구현한다.
- pushNamed() 함수 호출문 앞에 await 키워드를 붙여서 이 함수가 끝날 때까지 기다린다. 그런 다음 반환값을 result에 넣고 이 값을 todoList에 추가한다. result를 String으로 형변환시켜 주어야 한다.
- SecondDetail에 할 일을 등록하는 텍스트필드와 버튼을 추가한다.
- 텍스트필드에 할 일을 입력한 후 버튼을 누르면 데이터를 전달한 후 현재 화면을 종료한다.
* 앱을 실행한 후 플로팅 버튼을 누르면 할 일을 등록하는 화면이 나오고, 할 일을 입력한 뒤, 저장하기버튼을 누르면 첫 번째 화면으로 이동하고 목록에 방금 등록한 할 일이 추가된다.
* 전체 코드 보기
GitHub - shinjoo95/flutter_todo_list
Contribute to shinjoo95/flutter_todo_list development by creating an account on GitHub.
github.com
'flutter > development' 카테고리의 다른 글
| 책 목록 불러오기 (0) | 2022.11.14 |
|---|---|
| 동물 목록 어플 만들기(ListView)[2] (0) | 2022.11.12 |
| 동물 목록 어플 만들기(ListView)[1] (0) | 2022.11.12 |
| 계산기 구현하기 (0) | 2022.11.08 |
| 연락처 앱 만들기 (0) | 2022.10.26 |
