플러터는 Google에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위해 사용됩니다. Sticky 헤더는 플러터에서 많이 사용되는 디자인 패턴 중 하나입니다. Sticky 헤더는 스크롤 가능한 목록 위에 고정된 헤더를 생성하는 방법으로, 앱 내에서 섹션을 구분하거나 중요 정보를 강조하기 위해 사용됩니다.
이 글에서는 플러터에서 Sticky 헤더를 구현하는 방법을 알려드리겠습니다.
1. flutter_sticky_header 패키지 추가하기
Sticky 헤더를 구현하기 위해 flutter_sticky_header 패키지를 사용할 것입니다. 먼저, pubspec.yaml 파일에 다음을 추가하여 패키지를 추가하세요:
dependencies:
flutter_sticky_header: ^0.5.4
그리고 flutter package get 명령어를 터미널에서 실행하여 패키지를 다운로드하세요.
2. Sticky 헤더 위젯 생성하기
이제 Sticky 헤더를 생성하기 위해 StickyHeader 위젯을 사용할 수 있습니다. StickyHeader 위젯은 ListView나 CustomScrollView와 같은 스크롤 가능한 위젯 내에서 사용해야 합니다.
import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
class MyStickyHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverStickyHeader(
header: Container(
height: 50.0,
color: Colors.blue,
alignment: Alignment.center,
child: Text('Sticky Header'),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 100,
),
),
),
],
);
}
}
위의 코드에서는 CustomScrollView 내에 SliverStickyHeader 위젯을 사용하고 있습니다. header 속성에는 Sticky 헤더의 모습을 정의한 위젯을 넣어주면 됩니다. sliver 속성에는 스크롤 가능한 목록을 위한 위젯을 넣어줄 수 있습니다. 위 예시에서는 SliverList를 사용하여 목록을 생성하였습니다.
3. Sticky 헤더 사용하기
마지막으로, 위에서 생성한 Sticky 헤더를 앱에서 사용합니다. 예를 들어, 앱의 메인 위젯에서 Sticky 헤더를 사용하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sticky Header Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Sticky Header Example'),
),
body: MyStickyHeader(), // 위에서 생성한 StickyHeader 위젯 사용
),
);
}
}
위 예시에서는 MyStickyHeader 위젯을 body 속성으로 설정하여 Sticky 헤더를 사용하고 있습니다.
이제 플러터에서 Sticky 헤더를 구현하는 방법에 대해 알게 되었습니다. Sticky 헤더를 사용하여 앱의 UI를 더욱 유연하고 예쁘게 만들 수 있습니다.