[flutter] 플러터 sticky 헤더를 가진 날짜 선택 앱 구현하기

30 Nov 2023

flutter

플러터로 헤더를 가진 날짜 선택 앱을 구현해보려고 합니다. 이 앱은 사용자가 날짜를 선택할 수 있도록 하는데, 헤더는 선택하려는 날짜의 연도를 보여주는 역할을 합니다. 스크롤되는 리스트에서 헤더는 항상 상단에 고정되어 있어야 합니다.

필요한 패키지 import하기

우선, 해당 기능을 구현하기 위해 다음과 같은 패키지를 import 해야합니다.

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

sticky_headers 패키지는 스크롤되는 리스트에서 헤더를 sticky하게 만들어주는 역할을 합니다.

앱 구조 설계

헤더와 스크롤 가능한 리스트를 포함한 앱의 구조를 설계해야합니다. StickyHeaderBuilder 위젯을 사용하여 헤더와 리스트를 구성합니다.

class DatePickerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date Picker',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Date Picker'),
        ),
        body: ListView.builder(
          itemCount: 100, // 예시로 100개 항목 생성
          itemBuilder: (context, index) => StickyHeaderBuilder(
            builder: (context, state) => Column(
              children: [
                Container(
                  height: 50,
                  color: Colors.grey[300],
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Year ${index + 1}', // 헤더에 연도 출력
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                ListTile(
                  title: Text('Date'),
                  onTap: () {
                    // 날짜를 선택하는 기능 구현
                  },
                ),
              ],
            ),
            content: Column(
              children: [
                // 리스트 아이템 생성
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 ListView.builder를 사용하여 100개의 항목을 생성하고, StickyHeaderBuilder를 사용하여 각 항목의 헤더와 내용을 구성합니다. StickyHeaderBuilder의 builder 콜백에서 헤더를 생성하고 content 콜백에서 내용을 생성합니다.

날짜 선택 기능 구현

각 항목의 내용인 ListTile 위젯에서 날짜를 선택하는 기능을 구현해야합니다. 선택된 날짜를 저장하고 필요에 따라 사용자에게 표시할 수 있도록 코드를 작성합니다.

class DatePickerApp extends StatelessWidget {
  String selectedDate = ''; // 선택된 날짜를 저장할 변수

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //...

      body: ListView.builder(
        //...

        itemBuilder: (context, index) => StickyHeaderBuilder(
          //...

          content: Column(
            children: [
              ListTile(
                title: Text(selectedDate.isNotEmpty ? selectedDate : 'Select date'),
                onTap: () async {
                  final pickedDate = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime(2000),
                    lastDate: DateTime(2100),
                  );
                  if (pickedDate != null) {
                    // 선택된 날짜 저장
                    selectedDate = pickedDate.toString();
                    Navigator.of(context).pop();
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 selectedDate 변수를 생성하여 선택된 날짜를 저장합니다. ListTile 위젯을 탭하면 showDatePicker를 사용하여 사용자에게 날짜 선택 창을 표시합니다. 선택된 날짜가 유효하면 selectedDate에 저장하고, 창을 닫습니다.

결론

이제 위의 코드를 사용하여 플러터로 헤더를 가진 날짜 선택 앱을 구현할 수 있습니다. 이 앱은 사용자가 헤더를 포함한 스크롤 가능한 리스트에서 날짜를 선택하도록 도와줍니다.