flutter(플러터) - 실무 구현(욜로 여행사)

디자인 가이드를 보고 구현해 보세요.

pubspec.yaml을 폰트를 추가

flutter:
  assets:
    - assets/images/
  fonts:
    - family: AritaDotum
      fonts:
        - asset: assets/fonts/AritaDotumKR-Medium.ttf
        - asset: assets/fonts/AritaDotumKR-Bold.ttf
          weight: 700

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'AritaDotum',
      ),
      home: TodoScreen(),
    );
  }
}

// 모델 (데이터 구조)
class Todo {
  String title;
  bool isDone;

  Todo({required this.title, this.isDone = false});
}

class TodoScreen extends StatefulWidget {
  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  List<Todo> todos = [];
  final TextEditingController controller = TextEditingController();

  // 추가
  void addTodo() {
    if (controller.text.isEmpty) return;

    setState(() {
      todos.add(Todo(title: controller.text));
      controller.clear();
    });
  }

  // 삭제
  void deleteTodo(int index) {
    setState(() {
      todos.removeAt(index);
    });
  }

  // 체크 토글
  void toggleTodo(int index) {
    setState(() {
      todos[index].isDone = !todos[index].isDone;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("TODO 앱"),
        centerTitle: true,
      ),
      body: Column(
        children: [
          // 입력창
          Padding(
            padding: const EdgeInsets.all(12),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: controller,
                    decoration: const InputDecoration(
                      hintText: "할 일을 입력하세요",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: addTodo,
                  child: const Text("추가"),
                )
              ],
            ),
          ),

          // 리스트
          Expanded(
            child: ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
                final todo = todos[index];

                return ListTile(
                  leading: Checkbox(
                    value: todo.isDone,
                    onChanged: (_) => toggleTodo(index),
                  ),
                  title: Text(
                    todo.title,
                    style: TextStyle(
                      decoration: todo.isDone
                          ? TextDecoration.lineThrough
                          : null,
                    ),
                  ),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () => deleteTodo(index),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}