[flutter] 플러터 스택드 위젯에서 할 일 목록 앱 개발하는 방법

15 Dec 2023

flutter

플러터(Flutter)를 사용하여 할 일 목록 앱을 개발하는 방법에 대해 알아보겠습니다. 이 예제에서는 Stack 위젯을 사용하여 화면에 여러 위젯을 겹쳐서 표시하는 방법을 다룰 것입니다.

할 일 목록 앱 디자인

우선 할 일 목록 앱의 디자인을 구상해보겠습니다. 할 일을 표시하는 영역이 상단에 위치하고, 추가 버튼은 화면 하단에 표시될 것입니다. 또한, 할 일을 나타내는 각 항목은 누르면 완료된 할 일로 이동되는 기능이 있을 것입니다.

플러터로 할 일 목록 앱 만들기

필수 패키지 및 라이브러리 가져오기

우선, 개발을 시작하기 전에 필요한 패키지와 라이브러리를 가져옵니다. flutter/material.dart 라이브러리로부터 필요한 위젯과 기능을 가져올 것입니다.

import 'package:flutter/material.dart';

할 일 목록 앱 구현하기

할 일 목록 앱은 StatefulWidget 클래스를 사용하여 구현됩니다. Stack 위젯을 사용하여 여러 위젯을 겹쳐서 표시할 것입니다.

class TodoApp extends StatefulWidget {
  @override
  _TodoAppState createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할 일 목록'),
      ),
      body: Stack(
        children: <Widget>[
          // 할 일 목록을 표시하는 위젯 추가
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 할 일 추가 기능 구현
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

할 일 목록 구현하기

Stack 위젯 내부에는 할 일 목록을 표시하는 위젯들이 추가될 것입니다. 이 예제에서는 ListView 위젯을 사용하여 할 일 목록을 스크롤할 수 있도록 구현할 것입니다.

body: Stack(
  children: <Widget>[
    ListView(
      padding: EdgeInsets.only(bottom: 80),
      children: <Widget>[
        // 할 일 항목 위젯 추가
      ],
    ),
  ],
),

완료된 할 일로 이동하기

각 할 일 항목을 누를 경우, 완료된 할 일 목록으로 이동하는 기능을 구현할 것입니다.

GestureDetector(
  onTap: () {
    // 완료된 할 일로 이동하는 기능 구현
  },
  child: ListTile(
    title: Text('할 일 제목'),
  ),
),

마치며

위의 단계를 따라가면 플러터를 사용하여 할 일 목록 앱을 간단하게 구현할 수 있습니다. Stack 위젯을 사용하여 여러 위젯을 겹쳐서 나타내는 방법과 각 위젯에 대한 기능을 추가하는 방법을 배웠습니다. 이를 바탕으로 보다 복잡한 기능을 추가하여 완전한 할 일 목록 앱을 개발할 수 있을 것입니다.

참고 자료: Flutter 공식 문서