Flutter 4. ToDo 앱 만들기. (4) 추가, 삭제, 변경 메소드 만들기.

Flutter로 간단한 ToDo앱을 만들어보는 프로젝트입니다.

 

처음 시작화면 구성부터 내용 추가, 삭제, 검색 기능을 메소드로 구현해 보겠습니다.

 

이 편은 스플래시 시작화면 구성하는 방법을 설명합니다.

 

이 프로젝트는 macOS 에서 VScode를 사용했스며, iPhone 14 Pro Max 시뮬레이터를 사용했습니다.

 

github : https://github.com/tjdwns4712/flutterToDoApp

 

깃허브에서 프로젝트 전체 소스코드를 확인할 수 있습니다.

 

중요한 내용만을 요약했기에 전체 코드를 읽으며 이해하는 것을 추천합니다.

 

이 글은 앞선 ToDo프로젝트 설명과 이어집니다.

https://miacoder.tistory.com/4

Flutter 3. ToDo 앱 만들기. (3) Json 형식을 이용해 정보 저장하기.

 

 

앱을 만드는데 있어서는 걷모습을 디자인 하는 것으로 끝나는 것이 아닙니다.

 

앱에서 어떤 행동(버튼 누르기, 홀드, 더블 클릭)등 이 일어났을 때 그에 상응하는 반응을 만들어야 합니다.

 

예를 들어서는 빨간 버튼을 클릭하는 것을 통해 화면에서 특정 오브젝트를 삭제하는 것이 있습니다.

 

삭제 기능을 구현해 example2를 삭제.

 

이런 기능을 구현하기 위해서는 별도로 메소드를 작성해야합니다.

 

오늘은

(1). 체크 시 글씨 라인을 설정하는 메소드

(2). 빨간 버튼을 이용해서 리스트에서 삭제하는 메소드

(3). + 버튼과  입력창을 이용해 내용을 추가하는 메소드

 

를 구현해 보겠습니다.

 

 

1. 체크박스를 통해 글씨 모양 변경

 

void _handleToDoChange(ToDo todo) {
    setState(() {
      todo.isDone = !todo.isDone;
    });
  }

우선 눌렀을 때 boolean 값을 바꿔주는 _handleToDpChange메소드입니다.

 

setState와 !를 통해 위와 같이 간단하게 구현할 수 있습니다.

 

ture 값일 경우 false로, false값일 경우 true로 isDone 값을 바꿔줍니다.

 

 @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20),
      child: ListTile(
        onTap: () {
          onToDoChanged(todo); // 체크박스를 누르면 ToDo클래스의 bool타입이 바뀜
        },
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
        tileColor: Colors.white,
        leading: Icon(
          todo.isDone ? Icons.check_box : Icons.check_box_outline_blank,
          color: Colors.blue,
        ),
        title: Text(
          todo.todoText!, // todo의 todoText를 받아온다
          style: TextStyle(
            fontSize: 16,
            color: Colors.black,
            decoration: todo.isDone ? TextDecoration.lineThrough : null,
          ),
        ),

위 메소드로 바꾼 boolean값을 3항 연산자를 이용해 간단하게 다른 글씨체와 아이콘으로 바꾸는 방법입니다.

 

todo.isDOne ? Icons.check_box : Icons.check_box_outLine_blank

이 코드는 isDone값이 true일 경우 체크된 박스 표시를, false일 경우 빈 체크박스를 표시합니다.

 

todo.isDone ? TextDecoration.lineThrough : null

이 코드는 isDone값이 true일 경우 줄이 그어진 글씨체를 사용하고, 아닌 경우 null로 기본 글씨체를 사용하라는 의미입니다.

 

위와 같이 간단하게 메소드를 작성하고 삼항연산자를 활용하면 체크가 된 경우 줄이 그어진 글씨체를 나타내는 효과를 사용할 수 있습니다.

 

체크된 박스와 줄이쳐진 글씨 예시

 

 

2. 리스트 삭제 메소드

 

  void _deleteTodoItem(String id) {
    setState(() {
      todoList.removeWhere((item) => item.id == id);
      // todoList에서 id를 제거
      // 람다 표현식  ((item) => item.id == id) 에서 item은 id중 1개를 의미하는 임의 변수임.
      // todoList 중 받아온 아이디와 일치하는 id를 true 반환한다(제거한다).
    });
  }

위 메소드는 실행되었을 때 입력된 id값을 가진 값을 todoList로 부터 삭제하는 메소드입니다.

 

아래와 같이 활용 가능합니다

 

child: IconButton(
            color: Colors.white,
            iconSize: 18,
            icon: const Icon(Icons.delete),
            onPressed: () {
              onDeleteItem(todo.id);
              //빨간 휴지통 아이콘을 누르면 onDeleteItem메소드에 id를 넣고 실행
            },
          ),

onPressed안에 넣음으로서 사용 가능합니다.

메소드 이름이 다른 이유는 파일이 나누어져 있기 때문입니다.

같다고 생각하시고 이해하면 되겠습니다.

 

 

3. 리스트 추가 메소드

 

 void _addToDoItem(String toDo) {
    setState(() {
      todoList.add(ToDo(
        id: DateTime.now().microsecondsSinceEpoch.toString(),
        //id값은 현재 시간을 microsecondsSinceEpoch 타입으로 String 형태로 한다.
        todoText: toDo,
        //todoText값은 입력받은 값을 한다.
      ));
    });
    _todController.clear();
    //입력 후 입력창 내용을 지움.
  }

 

todoList에 현재 시간으로 id값을 부여하고, 내용을 추가하는 메소드입니다.

 

현재시간을 id값으로 사용한다면 고유값을 id값을 사용할 수 있기에 간단한 프로그래밍에서 고유 값이 필요할 때 좋은 방법입니다.

 

_todoContoroller.clear();은 내용을 입력한 후 입력창에 남아있는 내용을 지우는 역할을 합니다.

 

 Container(
                margin: const EdgeInsets.only(
                  bottom: 20,
                  right: 20,
                ),
                child: ElevatedButton(
                  onPressed: () {
                    _addToDoItem(_todController.text);
                    //_todController를 통해 텍스토 입력값을 텍스트로 받아와 메소드 실행
                  },

위 코드는 버튼을 눌렀을 때 추가하기 메소드가 실행되는 코드입니다.

 

위와 같은 방법으로 버튼에 기능을 구현할 수 있습니다.

 

다음에는 검색을 하고 필터를 적용하는 메소드를 만들어 보겠습니다.