Flutter 개발-4: 앱 상태 관리 추가하기

이전 포스팅에서 우리는 간단한 To-Do 리스트 앱의 UI를 구현했습니다. 이번에는 상태 관리를 추가하여 새로운 할 일을 추가하고, 완료 상태를 변경하는 기능을 구현해 보겠습니다.

Table of Contents

1. StatefulWidget으로 변경

먼저, TodoListScreen과 TodoList를 StatefulWidget으로 변경해야 합니다. 이렇게 하면 위젯의 상태를 변경할 수 있게 됩니다.

lib/main.dart 파일을 다음과 같이 수정합니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  List<Todo> todos = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My To-Do List'),
      ),
      body: TodoList(todos: todos, onTodoToggle: _toggleTodo),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTodo,
        child: Icon(Icons.add),
      ),
    );
  }

  void _addTodo() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        String newTodo = "";
        return AlertDialog(
          title: Text('Add a new todo'),
          content: TextField(
            onChanged: (value) {
              newTodo = value;
            },
          ),
          actions: <Widget>[
            TextButton(
              child: Text('Add'),
              onPressed: () {
                setState(() {
                  todos.add(Todo(title: newTodo));
                });
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  void _toggleTodo(Todo todo) {
    setState(() {
      todo.isCompleted = !todo.isCompleted;
    });
  }
}

class TodoList extends StatelessWidget {
  final List<Todo> todos;
  final Function(Todo) onTodoToggle;

  TodoList({required this.todos, required this.onTodoToggle});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(
            todos[index].title,
            style: TextStyle(
              decoration: todos[index].isCompleted ? TextDecoration.lineThrough : null,
            ),
          ),
          trailing: Checkbox(
            value: todos[index].isCompleted,
            onChanged: (_) => onTodoToggle(todos[index]),
          ),
        );
      },
    );
  }
}

class Todo {
  String title;
  bool isCompleted;

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

2. 코드 설명

Todo 클래스: 각 할 일 항목을 나타내는 모델 클래스입니다.
_TodoListScreenState 클래스:
_addTodo() 메서드: 새로운 할 일을 추가하는 대화 상자를 표시합니다.
_toggleTodo() 메서드: 할 일의 완료 상태를 토글합니다.
TodoList 클래스: 할 일 목록을 표시하고, 각 항목의 완료 상태에 따라 스타일을 변경합니다.

3. 주요 개념 설명

StatefulWidget: 상태를 가지고 있어 동적으로 변경될 수 있는 위젯입니다.
setState(): 위젯의 상태가 변경되었음을 Flutter에 알리고 UI를 다시 그리도록 합니다.
showDialog(): 팝업 대화 상자를 표시합니다.
AlertDialog: 사용자 입력을 받는 대화 상자입니다.

4. 앱 실행하기

터미널에서 다음 명령어를 실행하여 앱을 시작합니다:

flutter run

이제 앱을 실행하면 새로운 할 일을 추가하고, 완료 상태를 변경할 수 있습니다.

마무리

이번 포스팅에서는 To-Do 리스트 앱에 상태 관리를 추가하여 기능적인 앱으로 만들어 보았습니다. 이를 통해 Flutter에서의 상태 관리 기본 개념과 사용자 상호작용을 처리하는 방법을 배웠습니다.

다음 포스팅에서는 이 앱의 데이터를 로컬 저장소에 저장하여 앱을 종료하고 다시 열어도 데이터가 유지되도록 만들어 보겠습니다.

Flutter 개발에 대해 더 궁금한 점이 있다면 댓글로 남겨주세요!

Flutter 개발-4: 앱 상태 관리 추가하기

1. StatefulWidget으로 변경

2. 코드 설명

3. 주요 개념 설명

4. 앱 실행하기

마무리

관련 리소스

답글 남기기 응답 취소

1. StatefulWidget으로 변경

2. 코드 설명

3. 주요 개념 설명

4. 앱 실행하기

마무리

관련 리소스

관련된 글:

답글 남기기 응답 취소