이번 블로그 포스트에서는 플러터(Flutter)로 스티키 헤더를 사용하여 말풍선 채팅 화면을 만드는 방법에 대해 알아보겠습니다.
말풍선 채팅 화면은 사용자간의 대화를 시각적으로 표현하는데 유용한 UI 요소입니다. 이런 종류의 대화형 UI를 만들기 위해서는 스크롤 가능한 리스트와 헤더 위에 고정되는 말풍선이 필요합니다. 이를 위해 Flutter의 sticky 헤더를 사용하여 이러한 화면을 손쉽게 만들 수 있습니다.
필요한 패키지 설치
먼저, sticky_headers 패키지를 프로젝트에 추가해야 합니다. 이 패키지는 헤더 위에 고정된 위젯을 만들기 위해 사용됩니다.
dependencies:
sticky_headers: ^0.2.0
상기의 코드를 pubspec.yaml 파일의 dependencies 항목에 추가합니다. 그런 다음 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.
스티키 헤더 생성
이제 스티키 헤더를 생성하여 말풍선 채팅 화면을 만들어 보겠습니다.
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
class ChatPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("말풍선 채팅"),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return StickyHeader(
header: Container(
height: 50,
alignment: Alignment.center,
color: Colors.grey[300],
child: Text("헤더 $index"),
),
content: Container(
height: 100,
color: Colors.white,
child: ListTile(
title: Text("채팅 내용 $index"),
),
),
);
},
),
);
}
}
위의 코드는 스티키 헤더와 채팅 내용을 가진 ListView.builder를 생성합니다. 각각의 아이템은 StickyHeader로 감싸져 있으며, header 속성으로 헤더 위젯을 정의하고 content 속성으로 채팅 내용을 정의합니다.
실행 결과
아래와 같이 헤더와 해당하는 채팅 내용이 함께 표시되는 말풍선 채팅 화면이 생성됩니다.
마무리
이번 포스트에서는 Flutter 앱에서 sticky 헤더를 사용하여 말풍선 채팅 화면을 만드는 방법에 대해 알아보았습니다. sticky_headers 패키지를 사용하여 헤더 위에 고정된 채팅 말풍선을 구현할 수 있으며, 이를 활용하여 다양한 대화형 UI를 만들 수 있습니다.
더 많은 정보를 원하시면 sticky_headers 패키지의 문서를 참조해주세요.