할 일 목록: 작업 목록

Coddy Flutter 여정의 프로젝트 섹션에 포함된 레슨. 36개 중 1번째.

이 섹션에서는 기능을 하나씩 구현해 네 개의 앱을 만듭니다. 각 요소는 이미 모두 익혔으니, 이제 실제 앱을 만드는 방식대로 함께 조합해 봅니다.

첫 번째 앱은 할 일 목록입니다. 이 장을 마치면 할 일을 추가하고, 완료 표시를 하고, 스와이프해서 목록에서 없애고, 삭제를 되돌리고, 표시할 항목을 필터링할 수 있습니다.

모든 앱은 데이터에서 시작합니다. 지금은 할 일이 제목이므로, 작은 클래스가 제목을 담고 화면은 State 안에 할 일 목록을 유지합니다.

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

ListView.builder는 이 목록을 화면의 행으로 바꿉니다. itemBuilder를 itemCount까지 각 인덱스마다 한 번씩 호출하고, 호출할 때마다 ListTile 하나를 반환합니다.

챌린지

쉬움

작업을 표시하세요:

final String title 필드와 Task(this.title) 생성자가 있는 Task 클래스를 작성하세요
_TodoScreenState에서 세 가지 작업인 Buy milk, Walk the dog, Read a book으로 구성된 _tasks 목록을 만드세요
body:에 있는 Center를 각 작업의 제목을 ListTile에 표시하는 ListView.builder로 바꾸세요

직접 해보기

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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

// 여기에 Task 클래스를 작성하세요.

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

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // 여기에 할 일 목록을 만드세요.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}