할 일 목록: 빈 상태

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

아직 아무것도 끝내기 전에 완료를 누르면 빈 화면이 나타납니다. 고장 난 걸까요, 아니면 아무것도 없는 걸까요? 빈 상태가 이를 알려 줍니다. 조용한 아이콘과 현재 상황을 설명하는 한 줄이 표시됩니다.

필터마다 고유한 메시지가 있으므로 _filter에 대한 switch 표현식으로 메시지를 선택합니다.

String get _emptyMessage => switch (_filter) {
  Filter.all => 'No tasks yet',
  Filter.active => 'Nothing left to do',
  Filter.done => 'Nothing done yet',
};

그런 다음 목록이 표시될 자리에 둘 중 하나를 표시합니다. shown.isEmpty ? Center(...) : ListView.builder(...). _tasks가 아니라 현재 표시된 목록을 확인하세요. 완료를 선택하면 전체 목록은 비어 있지 않지만 화면은 비어 있습니다.

아이콘에는 테마의 outline 색상인 Theme.of(context).colorScheme.outline을 적용하세요. 이 색상은 시드 색상의 은은한 회색이므로 빈 상태도 앱의 일부처럼 보입니다.

이것으로 할 일 목록의 마지막 강의가 끝납니다. 테스트에서는 앱 전체를 확인합니다. 추가, 완료 표시, 스와이프, 필터 적용을 테스트합니다.

챌린지

중급

shown이 비어 있을 때 빈 상태를 표시하세요:

_emptyMessage getter를 추가하세요. 전체에는 No tasks yet, 활성에는 Nothing left to do, 완료에는 Nothing done yet을 사용하세요.
목록 대신 Icons.task_alt 아이콘(크기 64, 테마의 outline 색상), 12픽셀의 간격, 메시지로 구성된 가운데 정렬된 Column을 표시하세요.
그렇지 않으면 이전처럼 목록을 표시하세요.

직접 해보기

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;
  bool done = false;
}

enum Filter { all, active, done }

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')];
  final _controller = TextEditingController();
  Filter _filter = Filter.all;

  int get _left => _tasks.where((task) => !task.done).length;

  List<Task> get _shown => switch (_filter) {
        Filter.all => _tasks,
        Filter.active => _tasks.where((task) => !task.done).toList(),
        Filter.done => _tasks.where((task) => task.done).toList(),
      };

  void _addTask() {
    final title = _controller.text.trim();
    if (title.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Type a task first')),
      );
      return;
    }
    setState(() {
      _tasks.add(Task(title));
    });
    _controller.clear();
  }

  void _deleteTask(Task task) {
    final index = _tasks.indexOf(task);
    setState(() {
      _tasks.remove(task);
    });
    ScaffoldMessenger.of(context).hideCurrentSnackBar();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Deleted ${task.title}'),
        action: SnackBarAction(
          label: 'Undo',
          onPressed: () {
            setState(() {
              _tasks.insert(index, task);
            });
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final shown = _shown;
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      labelText: 'New task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton.filled(
                  onPressed: _addTask,
                  icon: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              children: [
                Text(
                  _left == 1 ? '1 task left' : '$_left tasks left',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
              ],
            ),
          ),
          SegmentedButton<Filter>(
            segments: const [
              ButtonSegment(value: Filter.all, label: Text('All')),
              ButtonSegment(value: Filter.active, label: Text('Active')),
              ButtonSegment(value: Filter.done, label: Text('Done')),
            ],
            selected: {_filter},
            onSelectionChanged: (selection) {
              setState(() {
                _filter = selection.first;
              });
            },
          ),
          const SizedBox(height: 8),
          Expanded(
            child: ListView.builder(
              itemCount: shown.length,
              itemBuilder: (context, index) {
                final task = shown[index];
                return Dismissible(
                  key: ObjectKey(task),
                  direction: DismissDirection.endToStart,
                  background: Container(
                    color: Colors.red,
                    alignment: Alignment.centerRight,
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: const Icon(Icons.delete, color: Colors.white),
                  ),
                  onDismissed: (direction) => _deleteTask(task),
                  child: ListTile(
                    leading: Checkbox(
                      value: task.done,
                      onChanged: (value) {
                        setState(() {
                          task.done = value!;
                        });
                      },
                    ),
                    title: Text(
                      task.title,
                      style: task.done
                          ? const TextStyle(
                              decoration: TextDecoration.lineThrough,
                              color: Colors.grey,
                            )
                          : null,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}