[flutter] 플러터 sticky 헤더를 가진 게시판 앱 만들기
플러터(Flutter)를 사용하여 Sticky 헤더를 가진 게시판 앱을 만드는 방법에 대해 알아보겠습니다.
목차
설치
플러터를 사용하기 위해 다음 명령을 터미널에 입력하여 Flutter SDK를 설치합니다.
$ git clone https://github.com/flutter/flutter.git
$ export PATH="$PATH:`pwd`/flutter/bin"
Flutter SDK가 설치되었는지 확인하려면 다음 명령을 실행합니다.
$ flutter doctor
프로젝트 설정
프로젝트를 생성하고 의존성을 설정하기 위해 다음 명령을 실행합니다.
$ flutter create sticky_header_board_app
$ cd sticky_header_board_app
$ flutter pub get
스크롤 가능한 목록
게시글 목록을 스크롤 가능한 형태로 구현하기 위해 ListView.builder 위젯을 사용합니다.
ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text('게시글 $index'),
);
},
),
Sticky 헤더 구현
Sticky 헤더를 구현하기 위해 sticky_headers 라이브러리를 사용합니다.
먼저, sticky_headers 라이브러리를 pubspec.yaml 파일에 추가합니다.
dependencies:
flutter:
sdk: flutter
sticky_headers: ^0.2.0
다음으로, StickyHeader 위젯을 사용하여 Sticky 헤더를 구현합니다.
ListView.builder(
itemBuilder: (context, index) {
if (index % 5 == 0) {
return StickyHeader(
header: Container(
height: 50,
color: Colors.grey[200],
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text('헤더 $index'),
),
content: ListTile(
title: Text('게시글 $index'),
),
);
} else {
return ListTile(
title: Text('게시글 $index'),
);
}
},
),
게시글 목록 구현
게시글 목록을 더욱 풍부하게 만들기 위해 ListView.builder 안에 다양한 요소를 추가할 수 있습니다. 예를 들어, 게시글의 작성자, 작성일 등을 표시할 수 있습니다.
ListView.builder(
itemBuilder: (context, index) {
if (index % 5 == 0) {
return StickyHeader(
header: Container(
height: 50,
color: Colors.grey[200],
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text('헤더 $index'),
),
content: ListTile(
title: Text('게시글 $index'),
subtitle: Text('작성자'),
trailing: Text('작성일'),
),
);
} else {
return ListTile(
title: Text('게시글 $index'),
subtitle: Text('작성자'),
trailing: Text('작성일'),
);
}
},
),
결론
이제 플러터를 사용하여 Sticky 헤더를 가진 게시판 앱을 만들 수 있습니다. ListView.builder와 sticky_headers 라이브러리를 사용하여 스크롤 가능한 목록과 Sticky 헤더를 구현할 수 있었습니다. 게시글 목록을 더욱 풍부하게 만들기 위해 다양한 요소들을 추가할 수 있습니다. 플러터의 다양한 기능을 활용하여 개선된 게시판 앱을 만들어보세요.
플러터 공식 문서: https://flutter.dev/