[flutter] FloatingActionButton을 사용하여 할일 목록 만들기 기능 구현하기

11 Dec 2023

flutter

이번에는 Flutter 앱에서 할일 목록을 만들고 관리하는 기능을 구현하는 방법에 대해 알아보겠습니다. 우리는 FloatingActionButton 위젯을 사용하여 새로운 할일을 추가하는 기능을 구현할 것입니다. 또한, 할일 목록은 상태 관리 변수를 통해 관리될 것입니다.

1. 할일 목록 화면 만들기

먼저, 할일 목록 화면을 만들어야 합니다. 이 화면에는 현재 할일 목록이 표시되고, 사용자가 새로운 할일을 추가할 수 있는 버튼이 있어야 합니다. 이를 위해 다음과 같이 ListView 및 FloatingActionButton 위젯을 사용하여 화면을 만들 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  List<String> _todos = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할일 목록'),
      ),
      body: ListView.builder(
        itemCount: _todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_todos[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: 새로운 할일 추가 기능 구현
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

여기서 _todos 리스트는 할일 목록을 표현하기 위한 상태 관리 변수입니다.

2. 할일 추가 기능 구현하기

이제, FloatingActionButton의 onPressed 이벤트 핸들러를 구현하여 새로운 할일을 추가할 수 있도록 만들어야 합니다. 또한, 사용자가 할일을 입력하고 추가할 수 있는 팝업 창을 표시해야 합니다. 이를 위해 아래와 같이 showDialog 함수를 사용하여 팝업 창을 구현할 수 있습니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        String newTodo = '';
        return AlertDialog(
          title: Text('할일 추가'),
          content: TextField(
            onChanged: (value) {
              newTodo = value;
            },
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                setState(() {
                  _todos.add(newTodo);
                });
                Navigator.pop(context);
              },
              child: Text('추가'),
            ),
          ],
        );
      },
    );
  },
  child: Icon(Icons.add),
),

이제 사용자는 FloatingActionButton을 눌러 팝업 창에서 새로운 할일을 입력하고 추가할 수 있을 것입니다.

마치며

이제 Flutter 앱에서 FloatingActionButton을 사용하여 할일 목록을 만들어 관리하는 기능을 구현하는 방법을 알아보았습니다. 이를 통해 사용자가 간편하게 할일을 추가하고 관리할 수 있는 기능을 제공할 수 있을 것입니다. 만약 문제가 있거나 추가 정보가 필요하다면, 자유롭게 문의해 주세요!