목차
소개
이번 튜토리얼에서는 플러터에서 sticky 헤더를 사용하여 즐겨찾기 목록 앱을 구현하는 방법을 알아보겠습니다. sticky 헤더를 사용하면 사용자가 스크롤을 하는 동안 헤더가 항상 화면 상단에 고정되어 유용한 기능을 제공할 수 있습니다.
프로젝트 설정
우선 플러터 개발 환경을 설정합니다. Flutter SDK가 설치되어 있지 않은 경우 https://flutter.dev/ 에서 설치할 수 있습니다. Flutter가 설치되었다면 터미널에서 다음 명령어로 프로젝트를 생성합니다.
flutter create sticky_header_app
생성된 프로젝트 디렉토리로 이동한 후, pubspec.yaml 파일을 열어 다음 종속성을 추가합니다.
dependencies:
sticky_headers: ^0.2.0
http: ^0.12.2
이후 터미널에서 flutter packages get 명령어를 실행하여 종속성을 설치합니다.
스토리지 구현
즐겨찾기 목록을 저장하기 위해 스토리지를 구현해야 합니다. 이 예제에서는 플러터의 SharedPreferences 패키지를 사용하여 심플하게 구현하도록 하겠습니다.
먼저 lib 디렉토리에 data 폴더를 생성하고, 그 안에 storage.dart 파일을 만듭니다. 다음 코드를 추가하여 스토리지 클래스를 정의합니다.
import 'package:shared_preferences/shared_preferences.dart';
class Storage {
static Future<void> saveFavoriteItems(List<String> favorites) async {
final prefs = await SharedPreferences.getInstance();
prefs.setStringList('favorites', favorites);
}
static Future<List<String>> getFavoriteItems() async {
final prefs = await SharedPreferences.getInstance();
final favorites = prefs.getStringList('favorites') ?? [];
return favorites;
}
}
위의 코드에서 saveFavoriteItems 함수는 즐겨찾기 항목을 저장하고, getFavoriteItems 함수는 저장된 즐겨찾기 항목을 불러옵니다.
UI 디자인과 스크롤 효과
이제 즐겨찾기 목록 앱의 UI와 sticky 헤더를 구현해보겠습니다.
먼저 lib 폴더에 pages 폴더를 생성하고, 그 안에 home_page.dart 파일을 만듭니다. 다음 코드를 작성하여 홈 페이지를 구현합니다.
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
import '../data/storage.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> _favorites = [];
@override
void initState() {
super.initState();
_loadFavorites();
}
Future<void> _loadFavorites() async {
final favorites = await Storage.getFavoriteItems();
setState(() {
_favorites = favorites;
});
}
Future<void> _saveFavorites() async {
await Storage.saveFavoriteItems(_favorites);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('즐겨찾기 목록'),
),
body: ListView.builder(
itemCount: _favorites.length,
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
padding: EdgeInsets.all(8.0),
color: Colors.grey[300],
child: Text(
'카테고리 ${index + 1}',
style: TextStyle(fontSize: 20),
),
),
content: ListTile(
title: Text(_favorites[index]),
),
);
},
),
);
}
@override
void dispose() {
_saveFavorites();
super.dispose();
}
}
위의 코드에서 _favorites 리스트는 즐겨찾기 항목을 저장합니다. initState 함수에서 _loadFavorites 함수를 호출하여 스토리지에서 즐겨찾기를 불러온 후, _saveFavorites 함수를 dispose 함수에서 호출하여 변경된 즐겨찾기를 저장합니다.
코드를 실행하고 앱을 확인하면, 즐겨찾기가 카테고리별로 분리되어 표시되며 스크롤이 가능한 sticky 헤더를 확인할 수 있습니다.
결론
이렇게 플러터의 sticky 헤더를 사용하여 즐겨찾기 목록 앱을 구현하는 방법에 대해 알아보았습니다. sticky 헤더는 다양한 사용자 인터페이스 요구사항을 충족시키기 위한 유용한 기능 중 하나입니다. 추가적인 버튼이나 인터랙티브한 동작을 구현하여 사용자에게 더욱 편리한 환경을 제공할 수 있습니다.