목차
소개
이번 튜토리얼에서는 플러터(Flutter)를 사용하여 Sticky 헤더를 가진 긴급 연락처 앱을 디자인하는 방법을 알아보겠습니다. Sticky 헤더는 스크롤 가능한 리스트의 맨 위에 고정되어 있어 항상 사용자에게 보여지는 헤더입니다. 긴급 연락처 앱을 예로 들면, 사용자가 스크롤을 내리더라도 긴급 연락처 목록을 항상 확인할 수 있습니다.
프로젝트 설정
플러터 프로젝트를 시작하기 위해 다음 명령을 터미널에 입력하세요:
flutter create emergency_contacts_app
cd emergency_contacts_app
프로젝트를 생성한 후, pubspec.yaml 파일을 열고 다음 의존성을 추가하세요:
dependencies:
sticky_headers: ^0.2.0
의존성을 추가한 후, flutter pub get 명령을 실행하여 패키지를 가져옵니다.
Sticky 헤더 디자인
Sticky 헤더를 가진 앱을 만들기 위해 sticky_headers 패키지를 사용할 것입니다. main.dart 파일을 열고 다음 코드로 대체하세요:
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
void main() => runApp(EmergencyContactsApp());
class EmergencyContactsApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Emergency Contacts',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: EmergencyContactsScreen(),
);
}
}
class EmergencyContactsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Emergency Contacts'),
),
body: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
height: 50,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.centerLeft,
child: Text(
'Category $index',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
content: Column(
children: [
ListTile(
title: Text('Contact 1'),
subtitle: Text('123-456-7890'),
),
ListTile(
title: Text('Contact 2'),
subtitle: Text('123-456-7890'),
),
ListTile(
title: Text('Contact 3'),
subtitle: Text('123-456-7890'),
),
],
),
);
},
),
);
}
}
위의 코드에서는 sticky_headers 패키지를 사용하여 Sticky 헤더를 구현합니다. ListView.builder 위젯을 사용하여 아이템의 개수에 따라 리스트를 렌더링하고, StickyHeader 위젯을 사용하여 각 카테고리 헤더와 해당 항목을 구성합니다.
Sticky 헤더의 색상, 텍스트 등을 원하는대로 변경할 수 있습니다.
긴급 연락처 목록
위의 코드에서 우리는 간단한 긴급 연락처 목록을 하드코딩했습니다. 실제 앱에서는 데이터베이스나 외부 API와 연동하여 실제 연락처 데이터를 가져와야 합니다. 이 부분은 개별적인 요구에 맞게 구현되어야 합니다.
결론
위의 튜토리얼에서는 플러터를 사용하여 Sticky 헤더를 가진 긴급 연락처 앱을 디자인하는 방법에 대해 알아보았습니다. Sticky 헤더를 구현하기 위해 sticky_headers 패키지를 사용할 수 있으며, 긴급 연락처 목록은 데이터베이스나 외부 API와 연동하여 가져와야 합니다.