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

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

 

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

 

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

 

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

 

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

 

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

 

https://miacoder.tistory.com/3

Flutter 2. ToDo 앱 만들기. (2) 바텀바를 통해 여러 페이지 구현하기.

 

위 글과 연결되는 글입니다.

 

1. Json

 

Json이란 JavaScript Object Notation의 약자로, 경량의 데이터를 저장하고 교환하기 위한 형식입니다.

키-값 쌍으로 이루어진 데이터를 사용하며, 키는 문자열, 값은 int, booleam ,String등 다양한 방식을 사용합니다.

 

예시입니다.

 ToDo(
        id: '01',
        todoText: "example 1",
        isDone: true,
      )

여기서 ToDo라는 Json은 id는 문자역 01, todoText는 문자역 example 1, isDone는 boolean true를 나타낸다고 볼 수 있습니다.

 

 

2. Flutter에서 Json 사용방법.

 

class ToDo {
  String? id;
  String? todoText;
  bool isDone;

  ToDo({
    required this.id,
    required this.todoText,
    this.isDone = false,
  });

  static List<ToDo> todoList() {
    return [
      ToDo(
        id: '01',
        todoText: "example 1",
        isDone: true,
      ),
      ToDo(
        id: '02',
        todoText: "example 2",
        isDone: true,
      ),
      ToDo(
        id: '03',
        todoText: "example 3",
      ),
      ToDo(
        id: '04',
        todoText: "example 4",
      ),
      ToDo(
        id: '05',
        todoText: "example 5",
      ),
      ToDo(
        id: '06',
        todoText: "example 6",
      ),
    ];
  }
}

 

위와 같이 클래스를 만들어서 사용합니다.

 

우선 String? id; String? todoText를 정의힙니다. 여기서 ?연산자는 개발자가 이 값은 null값일 수도 있고, 이를 알고 있다는 것을 컴퓨터에게 알리는 행위입니다.

따라서 초기화를 하지 않아도 됩니다.

그리고 null값이 아니므로 이후 반드시 다른 값으로 초기화 해야합니다.

 

bool isDone는 반드시 필요한 변수가 아니므로 ?연산자를 사용하지 않습니다.

 

변수지정 후 필수 여부를 지정합니다. dart에서는 필수인 경우 required this.id 아닌 경우 this.id로 작성하면 됩니다.

this.isDone = flase 와 같이 기본값을 설정할 수 있습니다.

위 코드에서는 id, todoText는 필수로 입력해야하며, isDone는 사용해도되고 사용하지 않아도 됩니다.

 

그리고 Json을 작성합니다. 

다른 파일에서 Json이 있는 파일 내부의 Json클래스의 LIst의 내용을 참조해서 내용을 불러오거나, 수정, 삭제, 추가를 할 때 사용하는

리스트입니다.

 

위와 같이 작성을 해 두면 기본값으로 사용할 수 있습니다.

 

이걸 이제 활용하는 예시를 보여드리겠습니다.

 

위 네모칸을 보시면, 하나의 컨테이너에 파란 체크박스, 내용이 있습니다.

 

아까 Json에서 정의한 3가지가 id, todoText, isDone입니다.

이는 각각 각 todo를 나타내는 id역할, 각 todo의 내용, 파란색 체크박스에 체크를 할지 말지를 나타내는 isDone입니다.

 

이렇게 Json형식을 이용한다면 한 컨테이너에 들어갈 내용을 모아서 정리할 수 있고, 위 todo를 여러개 표시한 것 처럼

반복되는 내용을 여러개 만들어야 할 때 반복문을 사용하기 용의합니다.

 

 

3. 코드 예시.

 

import 'package:flutter/material.dart';
import '../model/todo.dart';

class TodoItem extends StatelessWidget {
  final ToDo todo;
  final onToDoChanged; // 체크박스로 todo를 완료했는지 확인하는 변수
  final onDeleteItem; // 쓰레기통 버튼으로 삭제하는 용

  const TodoItem(
      {Key? key,
      required this.todo,
      required this.onToDoChanged,
      required this.onDeleteItem})
      : super(key: key);

  @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,
          ),
        ),
        trailing: Container(
          padding: const EdgeInsets.all(0),
          margin: const EdgeInsets.symmetric(vertical: 12),
          width: 35,
          height: 35,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(5),
          ),
          child: IconButton(
            color: Colors.white,
            iconSize: 18,
            icon: const Icon(Icons.delete),
            onPressed: () {
              onDeleteItem(todo.id);
              //빨간 휴지통 아이콘을 누르면 onDeleteItem메소드에 id를 넣고 실행
            },
          ),
        ),
      ),
    );
  }
}

d우선 import를 통해 model 폴더 내 todo.dart에 접근할 수 있도록 합니다.

 

위 코드는 코드위 사진에 보이는 한 개의 Todo를 정의하는 코드입니다.

todo.isDone ? Icons.check_box : Icons.check_box_outline_blank

 

여기선 todo파일의 isDone변수가 true면 아이콘을 채우고, false라면 비우라는 의미입니다.

 

todo.todoText!,

todo파일의 todoText의 값을 가져오고, 이것을 null이 아니라는 것을 !연산자를 통해 나타냅니다.

 

onDeleteItem(todo.id);

todo파일의 id값을 가져와서 삭제하는 코드입니다.

 

이 처럼 Json 형식을 이용할 수 있겠습니다.

 

다음에는 이를 구동하는 메소드를 알아보겠습니다.