[flutter] 플러터에서 sticky 헤더를 사용한 관광지 정보 앱 만들기

30 Nov 2023

flutter

flutter-sticky-header

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 다양한 플랫폼에서 동일한 앱을 만들 수 있습니다. 이번에는 플러터에서 sticky 헤더를 사용하여 관광지 정보 앱을 만들어보겠습니다.

1. 플러터 개발 환경 세팅

플러터 개발을 시작하기 위해서는 아래의 단계를 따라야 합니다.

Flutter SDK 설치
Flutter 환경 변수 설정
에디터(예: VS Code) 설치 및 플러터 플러그인 추가

자세한 설치 방법은 Flutter 공식 문서를 참고하세요.

2. 관광지 정보 앱 UI 디자인

플러터에서 sticky 헤더를 구현하기 위해서는 flutter_sticky_header 패키지를 사용할 수 있습니다. 이 패키지를 사용하여 관광지 정보 앱의 UI를 디자인해보겠습니다.

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

class TouristInfoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tourist Info'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverStickyHeader(
            header: Container(
              height: 60.0,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                'Header 1',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item ${index + 1}'),
                ),
                childCount: 5,
              ),
            ),
          ),
          SliverStickyHeader(
            header: Container(
              height: 60.0,
              color: Colors.red,
              alignment: Alignment.center,
              child: Text(
                'Header 2',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item ${index + 6}'),
                ),
                childCount: 5,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

위의 코드는 헤더와 리스트로 구성된 관광지 정보 앱의 UI를 구현한 것입니다. SliverStickyHeader 위젯을 사용하여 각 헤더와 해당 헤더에 속하는 아이템들을 이어붙일 수 있습니다.

3. 실행 결과 확인

위의 코드를 실행하면 다음과 같이 헤더와 아이템이 나란히 나타납니다. 스크롤을 하더라도 헤더는 항상 화면 상단에 고정됩니다.

flutter-sticky-header-demo

결론

이번에는 플러터에서 sticky 헤더를 사용하여 관광지 정보 앱을 만드는 방법을 알아보았습니다. 플러터의 다양한 패키지와 위젯을 활용하면 더욱 다양하고 멋진 앱을 만들 수 있습니다.

더 자세한 내용은 flutter_sticky_header 문서를 참고하세요.