[flutter] 플러터에서 sticky 헤더를 가진 할일 목록 앱 디자인하기

30 Nov 2023

flutter

할일 목록 앱은 많은 사람들이 일상 생활에서 사용하는 기능적이고 편리한 앱입니다. 이번에는 Flutter를 사용하여 할일 목록 앱을 만들어보고, sticky 헤더를 추가하여 사용자 경험을 향상시켜보려고 합니다.

1. 프로젝트 만들기

우선 Flutter 개발 환경이 설치되어 있다고 가정하고, 새로운 Flutter 프로젝트를 만들어 시작해보겠습니다. 다음 명령어를 사용하여 새로운 Flutter 프로젝트를 생성합니다.

flutter create todolist_app

2. 할일 목록 UI 구성하기

프로젝트를 생성했다면, lib 폴더에 main.dart 파일을 열고 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';

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

class TodoListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할일 목록'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('할일 $index'),
          );
        },
      ),
    );
  }
}

위 코드는 기본적인 할일 목록 앱의 UI를 구성합니다. TodoListApp 클래스는 앱의 메인 화면을 설정하고, TodoListScreen 클래스는 할일 목록을 보여주는 화면입니다. ListView.builder를 사용하여 동적으로 할일 목록을 생성하도록 했습니다.

3. sticky 헤더 추가하기

이제 sticky 헤더를 추가해보겠습니다. sticky 헤더는 할일 목록을 카테고리별로 구분할 수 있도록 도와줍니다.

먼저, sticky 헤더를 표시하기 위해 sliver_sticky_header 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 항목에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sliver_sticky_header: ^0.4.0

패키지를 추가했다면, TodoListScreen 클래스를 다음과 같이 수정하여 sticky 헤더를 추가합니다.

import 'package:flutter/material.dart';
import 'package:sliver_sticky_header/sliver_sticky_header.dart';

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할일 목록'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverStickyHeader(
            header: Container(
              height: 50,
              color: Colors.blueGrey[200],
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Text(
                '카테고리 1',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text('할일 $index'),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 SliverStickyHeader 위젯을 사용하고 있습니다. header 항목에는 sticky 헤더를 구성하는 데 필요한 위젯을 추가하고, sliver 항목에는 할일 목록을 구성하는 위젯을 추가합니다. 이렇게 구성하면 각 카테고리에 해당하는 sticky 헤더와 해당 카테고리의 할일 목록이 표시됩니다.

4. 앱 실행하기

이제 앱을 실행하고 sticky 헤더가 정상적으로 표시되는지 확인해봅시다. 터미널에서 다음 명령어를 실행하여 Flutter 앱을 실행합니다.

flutter run

앱이 정상적으로 빌드되고 실행되면 할일 목록에 sticky 헤더가 표시되는 것을 확인할 수 있습니다.

마무리

이번에는 플러터에서 sticky 헤더를 가진 할일 목록 앱을 디자인하는 방법에 대해 알아보았습니다. sticky 헤더를 추가하여 사용자가 쉽게 할일 목록을 파악할 수 있도록 도와줄 수 있습니다. 플러터의 다양한 위젯과 패키지를 활용하여 더욱 다양하고 효과적인 할일 목록 앱을 만들어보세요!