기초

실생활 앱 (할 일 관리)

로컬 목록 데이터를 추가, 완료, 삭제하는 Todo 앱을 만들며 CRUD와 저장 구조의 기초를 익힙니다.

동작

실생활 앱 (할 일 관리) 실행 화면

할 일 관리 기초

Flutter 문서 읽기진행
운동 기록하기완료

TextField에 할 일을 입력하고 추가합니다. 항목을 누르면 완료 상태가 바뀝니다. 삭제 버튼으로 필요 없는 항목을 목록에서 제거합니다.

예제 코드

할 일 관리

import 'package:flutter/material.dart';

class Todo {
  const Todo({required this.title, this.done = false});
  final String title;
  final bool done;
  Todo toggle() => Todo(title: title, done: !done);
}

class TodoLocalApp extends StatefulWidget {
  const TodoLocalApp({super.key});

  @override
  State<TodoLocalApp> createState() => _TodoLocalAppState();
}

class _TodoLocalAppState extends State<TodoLocalApp> {
  final controller = TextEditingController(text: '물 마시기');
  var todos = const [Todo(title: 'Flutter 문서 읽기'), Todo(title: '운동 기록하기', done: true)];

  void addTodo() {
    final text = controller.text.trim();
    if (text.isEmpty) return;
    setState(() {
      todos = [...todos, Todo(title: text)];
      controller.clear();
    });
  }

  void toggleTodo(int index) {
    setState(() {
      todos = [for (var i = 0; i < todos.length; i++) i == index ? todos[i].toggle() : todos[i]];
    });
  }

  void removeTodo(int index) {
    setState(() => todos = [...todos]..removeAt(index));
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: controller),
        ElevatedButton(onPressed: addTodo, child: const Text('추가')),
        ...List.generate(todos.length, (index) {
          final todo = todos[index];
          return ListTile(
            leading: Checkbox(value: todo.done, onChanged: (_) => toggleTodo(index)),
            title: Text(todo.title),
            trailing: IconButton(onPressed: () => removeTodo(index), icon: const Icon(Icons.delete)),
          );
        }),
      ],
    );
  }
}

Card(
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '장보기 메모',
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.w900),
        ),
        const SizedBox(height: 16),
        TextField(controller: itemController),
      const SizedBox(height: 12),
      FilledButton(onPressed: addItem, child: const Text('추가')),
      const SizedBox(height: 12),
      ...items.map((item) => ListTile(title: Text(item)))
      ],
    ),
  ),
)

할 일 관리 기초

Flutter 문서 읽기진행
운동 기록하기완료

예제 코드 기능별 설명

코드를 나누어 읽기

import

material.dart는 TextField, ElevatedButton, Checkbox, ListTile, IconButton처럼 Todo 앱을 구성하는 기본 위젯을 제공합니다.

import 'package:flutter/material.dart';

Todo 모델

할 일은 제목과 완료 여부를 함께 가져야 하므로 문자열 하나가 아니라 Todo 모델로 다룹니다.

class Todo {
  const Todo({required this.title, this.done = false});
  final String title;
  final bool done;
}

입력 컨트롤러와 목록 변수

controller는 입력창 값을 읽고 비우는 역할을 합니다. todos는 현재 화면에 표시되는 로컬 데이터 목록이며, 나중에 Hive나 SQLite 저장값으로 바꿀 수 있습니다.

final controller = TextEditingController(text: '물 마시기');
var todos = const [Todo(title: 'Flutter 문서 읽기')];

CRUD 흐름

addTodo, toggleTodo, removeTodo가 각각 생성, 수정, 삭제 역할을 합니다. 로컬 저장소를 붙일 때도 이 함수 뒤에 저장 코드를 연결하면 됩니다.

void toggleTodo(int index) {
  todos = [for (var i = 0; i < todos.length; i++) i == index ? todos[i].toggle() : todos[i]];
}

로컬 저장 확장

예제는 메모리 목록으로 시작하지만, 같은 구조를 SharedPreferences, Hive, SQLite 저장 코드와 연결하면 초급 단계의 로컬 데이터 앱이 됩니다.

var todos = const [
  Todo(title: 'Flutter 문서 읽기'),
  Todo(title: '운동 기록하기', done: true),
];