[flutter] 플러터에서 sticky 헤더를 가진 메모 앱 디자인하기

30 Nov 2023

flutter

플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. 이번에는 플러터를 사용하여 sticky 헤더를 가진 메모 앱을 디자인하는 방법에 대해 알아보겠습니다.

1. Sticky 헤더 위젯 추가하기

Sticky 헤더를 구현하기 위해서는 sticky_headers 패키지를 사용할 수 있습니다. 이 패키지는 리스트뷰에 sticky 헤더를 추가하는 기능을 제공합니다.

먼저, sticky_headers 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter

  sticky_headers: ^0.2.0

그리고, sticky_headers 패키지를 import 하여 Sticky 헤더 위젯을 사용합니다.

import 'package:sticky_headers/sticky_headers.dart';

2. 메모 목록 구현하기

이제 메모 앱의 메모 목록을 구현해보겠습니다. 메모는 제목과 내용으로 구성되며, 시간 순으로 정렬되어야 합니다.

List<Memo> memos = [
  Memo(title: '첫번째 메모', content: '첫번째 메모의 내용입니다.'),
  Memo(title: '두번째 메모', content: '두번째 메모의 내용입니다.'),
  // ...
];

class Memo {
  final String title;
  final String content;

  Memo({required this.title, required this.content});
}

메모 목록을 보여주는 위젯은 ListView.builder를 사용하여 구현할 수 있습니다. 이때, sticky_headers 패키지의 StickyHeaderBuilder를 사용하여 sticky 헤더가 있는 리스트를 생성합니다.

ListView.builder(
  itemCount: memos.length,
  itemBuilder: (context, index) {
    Memo memo = memos[index];

    return StickyHeaderBuilder(
      builder: (context, stuckAmount) {
        return Container(
          height: 50,
          color: Colors.blue,
          alignment: Alignment.centerLeft,
          child: Text(
            memo.title,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        );
      },
      content: ListTile(
        title: Text(memo.title),
        subtitle: Text(memo.content),
      ),
    );
  }
)

위 코드에서 StickyHeaderBuilder의 builder 속성에서는 sticky 헤더의 디자인을 정의합니다. content 속성에는 sticky 헤더와 연결된 컨텐츠를 정의합니다.

3. 메모 추가 기능 구현하기

마지막으로 메모를 추가하는 기능을 구현해보겠습니다. 사용자가 메모를 추가할 수 있는 폼을 만들고, 제출 버튼을 눌렀을 때 새로운 메모를 메모 목록에 추가합니다.

String newMemoTitle = '';
String newMemoContent = '';

TextField(
  onChanged: (value) {
    setState(() {
      newMemoTitle = value;
    });
  },
  decoration: InputDecoration(
    labelText: '제목',
  ),
)

TextField(
  onChanged: (value) {
    setState(() {
      newMemoContent = value;
    });
  },
  decoration: InputDecoration(
    labelText: '내용',
  ),
)

TextButton(
  onPressed: () {
    setState(() {
      memos.add(Memo(title: newMemoTitle, content: newMemoContent));
    });
  },
  child: Text('메모 추가'),
)

위 코드는 텍스트 필드를 사용하여 메모의 제목과 내용을 입력받고, TextButton을 사용하여 메모를 추가하는 기능을 구현한 것입니다.

이제 플러터에서 sticky 헤더를 가진 메모 앱을 디자인하는 방법을 알아보았습니다. sticky_headers 패키지를 사용하면 간편하게 sticky 헤더를 구현할 수 있으며, 메모 목록에 메모를 추가하는 기능도 쉽게 추가할 수 있습니다.

참고 자료:

sticky_headers 패키지: https://pub.dev/packages/sticky_headers
Flutter 공식 문서: https://flutter.dev