[flutter] 플러터 앱에서 sticky 헤더를 사용한 타이머 앱 디자인하기

30 Nov 2023

flutter

이번에는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 타이머 앱을 디자인하는 방법을 알아보겠습니다. Sticky 헤더는 스크롤 시 상단에 고정되어 있는 헤더를 말하며, 사용자 경험을 향상시키는데 매우 유용합니다.

프로젝트 설정

먼저, 플러터 프로젝트를 생성하고 sticky_headers 패키지를 추가해야 합니다. sticky_headers 패키지는 sticky 헤더를 구현하기 위한 도구를 제공합니다. 아래와 같이 pubspec.yaml 파일에 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.0

패키지를 추가한 후에는 프로젝트를 업데이트 해야 합니다. 터미널에서 아래 명령어를 실행해주세요.

flutter packages get

sticky 헤더 디자인

이제 sticky 헤더를 포함한 타이머 앱을 디자인해보겠습니다.

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

class TimerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sticky Header Timer App'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return StickyHeader(
              header: Container(
                height: 50,
                color: Colors.green,
                child: Center(
                  child: Text('Header $index'),
                ),
              ),
              content: Container(
                height: 200,
                color: Colors.white,
                child: Center(
                  child: Text('Timer $index'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

위 코드에서는 StickyHeader 위젯을 사용하여 sticky 헤더를 생성하고 있습니다. StickyHeader 위젯은 header와 content 위젯을 받아서 헤더와 내용을 구성합니다.

위 예제에서는 ListView.builder를 사용하여 10개의 sticky 헤더와 타이머 컨텐츠를 생성하고 있습니다. 각 헤더와 컨텐츠는 Container 위젯을 사용하여 디자인할 수 있습니다.

실행 결과 확인하기

위 코드를 실행하면 다음과 같이 sticky 헤더를 포함한 타이머 앱이 나타납니다.

Sticky Header Timer App

결론

위에서는 플러터 앱에서 sticky 헤더를 사용한 타이머 앱을 디자인하는 방법에 대해 알아보았습니다. sticky 헤더는 앱의 사용자 경험을 향상시키는데 매우 유용한 기능이므로, 필요에 따라 활용해보시기 바랍니다.

더 많은 정보를 원하시면 sticky_headers 패키지 플러그인 문서를 참고해주세요.