Flutter로 간단한 To-Do 리스트 앱 만들기

 

 

 

안녕하세요! 이번에는 Flutter를 사용하여 간단한 To-Do 리스트 앱을 만드는 방법에 대해 알려드리겠습니다.

To-Do 리스트 앱은 일상 생활에서 많이 사용되는 앱 중 하나이며, Flutter를 사용하면 간편하게 개발할 수 있습니다.

이제 시작해봅시다!

 

 

1. 프로젝트 생성

• Flutter 개발을 위해 Flutter SDK를 설치합니다. (https://flutter.dev/docs/get-started/install 참조)
• 터미널 또는 명령 프롬프트에서 flutter create todo_app 명령을 실행하여 새로운 Flutter 프로젝트를 생성합니다.
• 생성된 프로젝트 폴더로 이동합니다. (cd todo_app)

2. 필요한 패키지 추가

• pubspec.yaml 파일을 열어 dependencies 섹션에 다음 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

 

• 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

 

3. 모델 클래스 생성

• lib 폴더 내부에 task.dart 파일을 생성합니다.
• task.dart 파일에 다음과 같이 코드를 작성합니다:

class Task {
  final String title;
  bool isDone;

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

4. 화면 구성

• lib 폴더 내부에 screens 폴더를 생성합니다.
• screens 폴더 내부에 tasks_screen.dart 파일을 생성합니다.
• tasks_screen.dart 파일에 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/task.dart';

class TasksScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('To-Do List'),
      ),
      body: ListView.builder(
        itemCount: Provider.of<TaskProvider>(context).tasksCount,
        itemBuilder: (context, index) {
          final task = Provider.of<TaskProvider>(context).tasks[index];
          return ListTile(
            title: Text(task.title),
            trailing: Checkbox(
              value: task.isDone,
              onChanged: (value) {
                Provider.of<TaskProvider>(context, listen: false).updateTask(task);
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 새로운 할일 추가 로직 작성
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

5. 상태 관리 및 로직 추가

• lib 폴더 내부에 providers 폴더를 생성합니다.
• providers 폴더 내부에 task_provider.dart 파일을 생성합니다.
• task_provider.dart 파일에 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';
import '../models/task.dart';

class TaskProvider extends ChangeNotifier {
  List<Task> _tasks = [
    Task(title: '할일 1'),
    Task(title: '할일 2'),
    Task(title: '할일 3'),
  ];

  List<Task> get tasks => _tasks;

  int get tasksCount => _tasks.length;

  void updateTask(Task task) {
    task.isDone = !task.isDone;
    notifyListeners();
  }

  // 새로운 할일 추가 메서드 작성
}

 

• lib 폴더 내부에 main.dart 파일을 열고, TaskProvider를 등록합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'providers/task_provider.dart';
import 'screens/tasks_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => TaskProvider(),
      child: MaterialApp(
        title: 'To-Do App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: TasksScreen(),
      ),
    );
  }
}

6. 앱 실행

• 터미널에서 flutter run 명령을 실행하여 앱을 실행합니다.
• 시뮬레이터나 연결된 디바이스에서 To-Do 리스트 앱이 실행되는 것을 확인할 수 있습니다.
• 할일을 추가하고 체크박스를 토글해보세요!
  
  

이제 Flutter로 간단한 To-Do 리스트 앱을 만들 수 있습니다.