플러터(Flutter)는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 아름답고 멋진 인터페이스를 구축할 수 있습니다. 이번 블로그 포스트에서는 플러터와 함께 Sticky 헤더를 가진 섹션별 화면을 만드는 방법에 대해 알아보겠습니다.
1. Sticky 헤더 위젯 추가하기
Sticky 헤더는 화면을 스크롤할 때 항상 고정된 위치에 남아있는 헤더입니다. 이를 구현하기 위해 sliver_sticky_header 패키지를 사용합니다. 먼저 pubspec.yaml 파일에 패키지를 추가해주세요.
dependencies:
flutter:
sdk: flutter
sliver_sticky_header: ^0.4.0
패키지 추가 후, flutter pub get 명령어를 실행하여 종속성을 설치해주세요.
2. 섹션별 리스트 레이아웃 만들기
이제 Sticky 헤더와 섹션별 리스트를 구현해보겠습니다. 먼저 SliverStickyHeader 위젯을 사용하여 Sticky 헤더를 만들고, SliverList를 사용하여 섹션별 리스트를 만들어주세요. 예를 들어, 아래의 코드는 3개의 섹션을 가진 리스트를 생성하는 예시입니다.
import 'package:flutter/material.dart';
import 'package:sliver_sticky_header/sliver_sticky_header.dart';
class SectionListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
SliverStickyHeader(
header: Container(
height: 50,
color: Colors.grey[200],
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text('Section 1', style: TextStyle(fontSize: 20)),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(title: Text('Item ${index + 1}'));
},
childCount: 10,
),
),
),
SliverStickyHeader(
header: Container(
height: 50,
color: Colors.grey[200],
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text('Section 2', style: TextStyle(fontSize: 20)),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(title: Text('Item ${index + 1}'));
},
childCount: 10,
),
),
),
SliverStickyHeader(
header: Container(
height: 50,
color: Colors.grey[200],
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text('Section 3', style: TextStyle(fontSize: 20)),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(title: Text('Item ${index + 1}'));
},
childCount: 10,
),
),
),
],
);
}
}
위의 코드에서는 CustomScrollView와 SliverStickyHeader를 사용하여 섹션별로 Sticky 헤더를 만들었고, SliverList를 사용하여 해당 섹션의 아이템 목록을 생성했습니다.
3. 섹션별 화면에서 Sticky 헤더 활용하기
이제 위에서 구현한 SectionListScreen 위젯을 사용하여 섹션별 화면을 만들어봅시다. 예를 들어, 다음과 같은 코드를 사용하면 섹션별 화면을 구현할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sticky Header Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(title: Text('Sticky Header Demo')),
body: SectionListScreen(),
),
);
}
}
위의 예시에서는 Scaffold를 사용하여 앱의 기본 구조를 생성하고, AppBar를 추가하여 앱 상단에 타이틀을 표시했습니다. 그리고 SectionListScreen을 몸체로 추가하여 섹션별 화면을 생성하였습니다.
이제 앱을 실행하면 Sticky 헤더가 있는 섹션별 리스트 화면을 확인할 수 있습니다.
결론
이번에는 Flutter에서 Sticky 헤더를 가진 섹션별 화면을 만드는 방법에 대해 알아보았습니다. Sticky 헤더를 사용하면 사용자가 화면을 스크롤할 때 헤더가 화면 상단에 고정되어 더 좋은 사용자 경험을 제공할 수 있습니다. Sticky 헤더를 사용하여 효과적이고 사용하기 편리한 인터페이스를 만들어보세요!