[flutter] 플러터 앱에서 sticky 헤더를 사용한 지도 앱 디자인하기
지도 기능을 가진 앱에서 사용자가 특정 위치에 대한 정보를 표시하기 위해 스티키 헤더를 사용하는 것은 많은 앱에서 흔히 볼 수 있는 디자인 패턴입니다. 이번 블로그 포스트에서는 플러터(Flutter)를 사용하여 이러한 스티키 헤더를 가지는 지도 앱을 디자인하는 방법에 대해 알아보겠습니다.
1. 플러터 프로젝트 생성
먼저, 플러터 프로젝트를 생성합니다. 다음 명령어를 터미널에서 실행하여 새로운 플러터 프로젝트를 생성합니다.
flutter create sticky_header_map
2. 의존성 추가
스티키 헤더를 사용하기 위해 의존성을 추가해야 합니다. pubspec.yaml 파일을 열고 다음 내용을 추가합니다.
dependencies:
sticky_headers: ^0.2.0
의존성을 추가한 후에는 터미널에서 다음 명령어를 실행하여 의존성 패키지를 설치합니다.
flutter pub get
3. 스티키 헤더 추가
지도 페이지를 만들고 스티키 헤더를 추가해보겠습니다. main.dart 파일을 열고 다음 코드를 추가합니다.
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
class StickyHeaderMap extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sticky Header Map'),
),
body: ListView.builder(
itemCount: 10, // 임의의 아이템 수
itemBuilder: (BuildContext context, int index) {
return StickyHeader(
header: Container(
height: 50,
color: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.centerLeft,
child: Text(
'Header $index',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
content: Container(
height: 200,
color: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.center,
child: Text('Content $index'),
),
);
},
),
);
}
}
void main() {
runApp(StickyHeaderMap());
}
위 코드에서 ListView.builder를 사용하여 10개의 항목을 가진 목록을 만들고, 각 항목마다 스티키 헤더와 컨텐츠를 추가했습니다. 헤더의 배경색은 파란색으로, 컨텐츠의 배경색은 회색으로 설정되어 있습니다.
4. 앱 실행
위 코드를 실행하여 플러터 앱에서 스티키 헤더를 사용한 지도 앱을 확인해보세요. 각 스티키 헤더는 해당 항목의 정보를 표시하며, 스크롤 시에도 화면 위에 고정되어 유저에게 쉽게 접근할 수 있습니다.
이처럼 플러터를 사용하여 스티키 헤더를 가진 지도 앱을 디자인하는 방법에 대해 알아보았습니다. 플러터의 확장성과 편리한 UI 컴포넌트를 통해 다양한 앱을 디자인할 수 있습니다.