Flutter 앱 개발 (5) : To-Do List 기능 구현하기(할 일 추가, 할 일 삭제)

To Do List 소개

간단하게 To-Do List의 기능을 소개하면 다음과 같다.

1. 할 일 추가

- 할 일 객체를 생성한 후, 할 일 내용을 저장한다. 할 일 객체에는 할 일 내용을 저장하는 work 변수와 할 일을 완료했는지 확인할 수 있는 isComplete 변수가 들어있다.

2. 할 일 삭제

- 생성된 할 일 객체를 삭제한다.

3. 할 일 수정

- 생성한 할 일 객체의 할 일 내용을 수정한다.

4. 할 일 완료

- 할 일 목록에 나타난 할 일 요소를 터치하면 해당하는 객체의 isComplete 변수를 수정한다.

5. 진척도 표시

- 완료한 할 일들의 비율을 계산하여 진척도를 표시한다.

6. 할 일 불러오기

- 생성한 할 일들을 화면에 출력한다.

 

할 일 객체를 저장하기 위해 객체 배열을 사용한다.

 

이번 포스팅에서는 할 일 추가, 할 일 불러오기, 할 일 삭제 기능을 구현할 예정이다.

 

1. 할 일 추가

Task Class

우선, 할 일 객체를 만들어 줄 Task Class를 만들어 보자.

main.dart가 있는 위치에 task.dart 파일을 만들어 보자.

 

class Task {

  String work;

  bool isComplete;

  Task(this.work) : isComplete = false;

}

Task의 멤버변수로 work와 isComplete를 선언해 주었다. 각각 할 일 내용과 할 일 완료 여부를 저장한다.

생성자를 통해 할 일 내용을 저장하고, 객체를 생성했을 때 완료 여부는 기본값으로 false를 저장한다.

 

할 일 추가

Task Class를 만들었으니, 우리가 만든 레이아웃에 기능을 추가해 보자.

우선, Task를 저장해 줄 배열을 만들어 보자.

 

우리가 만든 Task 클래스를 import하고, _MyHomePageState 내부에 다음과 같은 코드를 입력하면 된다.

List<Task> tasks = [];

지금부터 생성된 task 객체를 이 배열에 저장할 것이다.

 

다음으로, 입력한 내용을 객체로 생성해서 배열에 저장하는 코드를 작성해 보자.

add 버튼을 눌렀을 때 TextField에 적힌 내용을 저장하는 객체를 생성한 뒤 배열에 저장해 보자.

코드는 다음과 같다.

ElevatedButton(

                    onPressed: () {

                      if (_textController.text == '') {

                        return;

                      } else {

                        setState(() {

                          var task = Task(_textController.text);

                          tasks.add(task);

                          _textController.clear();

                        });

                      }

                    },

                    child: const Text("add"),

                  ),

ElevatedButton의 onPressed 옵션의 내용을 수정해 주었다.

만약 TextField에 아무 내용도 없으면 함수를 종료하고, 내용이 있다면 내용을 전달하여 task 객체를 생성한다. 그 후 TextField를 비워준다. 

setState를 통해 객체를 생성하고 UI를 다시 렌더링하여 화면에 할 일 객체가 보일 수 있게 하였다.

 

2. 할 일 목록 불러오기

할 일 목록 불러오기

당연하게도, Task를 추가했으니 저장된 Task를 화면에 출력하는 기능이 있어야 저장된 Task를 확인할 수 있다. 지금부터 그 기능을 추가해 보려고 한다.

기존에 만들었던 할 일 요소 코드를 다음과 같이 수정해 보자.

 

for (var i = 0; i < tasks.length; i++)

              Row(

                children: [

                  Flexible(

                    child: TextButton(

                      style: TextButton.styleFrom(

                        shape: const RoundedRectangleBorder(

                          borderRadius: BorderRadius.all(Radius.zero),

                        ),

                      ),

                      onPressed: () {},

                      child: Padding(

                        padding: const EdgeInsets.all(8.0),

                        child: Row(

                          children: [

                            const Icon(Icons.check_box_outline_blank_rounded),

                            Text(tasks[i].work)

                          ],

                        ),

                      ),

                    ),

                  ),

                  TextButton(

                    onPressed: () {},

                    child: const Text("수정"),

                  ),

                  TextButton(

                    onPressed: () {},

                    child: const Text("삭제"),

                  ),

                ],

              )

for문을 통해 Widget을 생성할 수 있도록 코드를 수정하였다.

TextButton 부분에서는 tasks에 저장되어있는 task들의 work 값을 나타낼 수 있게 하였다.

 

실행 결과 성공적으로 할 일들을 확인할 수 있었다.

 

할 일 삭제

할 일 삭제

이제 추가한 task를 삭제하는 기능을 구현해 보자.

방금 수정한 할 일 요소의 삭제 버튼에 기능을 추가할 것이다.

버튼을 눌렀을 때, 해당 index에 있는 task를 삭제하는 코드를 추가해 보자.

 

for (var i = 0; i < tasks.length; i++)

              Row(

                children: [

                  Flexible(

                    child: TextButton(

                      style: TextButton.styleFrom(

                        shape: const RoundedRectangleBorder(

                          borderRadius: BorderRadius.all(Radius.zero),

                        ),

                      ),

                      onPressed: () {},

                      child: Padding(

                        padding: const EdgeInsets.all(8.0),

                        child: Row(

                          children: [

                            const Icon(Icons.check_box_outline_blank_rounded),

                            Text(tasks[i].work)

                          ],

                        ),

                      ),

                    ),

                  ),

                  TextButton(

                    onPressed: () {},

                    child: const Text("수정"),

                  ),

                  TextButton(

                    onPressed: () {

                      setState(() {

                        tasks.remove(tasks[i]);

                      });

                    },

                    child: const Text("삭제"),

                  ),

                ],

              )

해당하는 index의 객체를 배열에서 삭제하는 코드를 추가하였다. setState를 통해 Widget을 재렌더링해서 삭제된 내용이 적용되도록 하였다.

 

실행 결과 성공적으로 삭제되는 것을 확인할 수 있다.

 

이번 포스팅에서는 간단하게 할 일 추가와 삭제 기능을 구현해 보았다. 이 기능들을 응용해서 다른 App을 만들 때 유용하게 사용할 수 있을 것 같다.