할 일 목록: 작업 추가하기

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

항목을 추가할 수 없는 할 일 목록은 포스터나 다름없습니다. 목록 위에 입력란과 둥근 추가 버튼을 Row 안에 배치하세요.

입력란에는 TextEditingController를 연결하여 추가 버튼이 입력된 내용을 읽을 수 있게 합니다. 추가는 두 단계로 이루어집니다. setState 안에서 목록에 새 Task를 넣어 목록을 다시 그린 다음, 다음 항목을 입력할 수 있도록 입력란을 비웁니다.

void _addTask() {
  setState(() {
    _tasks.add(Task(_controller.text));
  });
  _controller.clear();
}

이제 입력란과 목록이 화면을 함께 사용합니다. Column 안의 ListView는 주위에 Expanded가 필요합니다. 그래야 남은 공간을 차지하고, 전체 공간을 모두 요구하지 않습니다.

IconButton.filled는 테마 색상의 채워진 원 안에 표시되는 IconButton으로, Material 3에서 주요 동작을 나타내는 방식입니다.

챌린지

중급

입력란에서 작업을 추가하세요:

상태에 TextEditingController를 만들고 이름을 _controller로 지정하세요(그리고 dispose하세요).
body를 Column으로 만드세요. 먼저 16픽셀 패딩 안에 Expanded TextField와 Icons.add가 있는 IconButton.filled를 포함하는 Row를 배치하고, 이어서 Expanded 안에 목록을 배치하세요. TextField의 레이블은 New task로 지정하세요.
버튼을 누르면 입력한 작업을 목록의 맨 끝에 추가하고 입력란을 비우세요.

직접 해보기

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(),
    );
  }
}

class Task {
  Task(this.title);

  final String title;
}

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

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

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}