Flutter 개발-3: To-Do 리스트 앱 UI 구현하기

이전 포스팅에서 Flutter 프로젝트를 생성하고 기본 구조를 살펴보았습니다. 이번에는 실제로 간단한 To-Do 리스트 앱의 UI를 구현해보겠습니다. 이 과정을 통해 Flutter의 기본적인 위젯들과 레이아웃 구성 방법을 배울 수 있습니다.

1. 프로젝트 설정

먼저, 새로운 Flutter 프로젝트를 생성합니다:

flutter create todo_app
cd todo_app

2. 메인 화면 구현

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My To-Do List'),
      ),
      body: TodoList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: 새 할 일 추가 기능 구현
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class TodoList extends StatelessWidget {
  final List<String> todos = ['Buy groceries', 'Clean the house', 'Walk the dog'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(todos[index]),
          trailing: Checkbox(
            value: false,
            onChanged: (bool? value) {
              // TODO: 체크박스 상태 변경 기능 구현
            },
          ),
        );
      },
    );
  }
}

3. 코드 설명

• MyApp 클래스: 앱의 전체적인 테마와 홈 화면을 설정합니다.
• TodoListScreen 클래스: 앱의 메인 화면을 구성합니다. AppBar, TodoList, FloatingActionButton을 포함합니다.
• TodoList 클래스: 할 일 목록을 표시하는 ListView를 구현합니다.

4. 주요 위젯 설명

• Scaffold: 기본적인 앱 화면 구조를 제공합니다.
• AppBar: 앱 상단의 제목 표시줄입니다.
• ListView.builder: 동적으로 리스트를 생성합니다.
• ListTile: 리스트의 각 항목을 표시합니다.
• Checkbox: 할 일의 완료 여부를 체크하는 데 사용됩니다.
• FloatingActionButton: 새로운 할 일을 추가하는 버튼입니다.

5. 앱 실행하기

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

flutter run

마무리

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

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

관련 리소스

• Flutter 공식 문서: https://flutter.dev/docs
• Flutter 위젯 카탈로그: https://flutter.dev/docs/development/ui/widgets