플러터는 Google에서 개발한 사용자 인터페이스 프레임워크로서, 강력하고 효율적인 애플리케이션 개발을 가능하게 해줍니다. 이번 포스트에서는 플러터의 Sticky 헤더를 활용하여 레시피 목록 앱을 만들어보겠습니다. Sticky 헤더는 리스트뷰나 그리드뷰에 헤더를 고정시켜 편리한 스크롤 기능을 제공하는 기능입니다.
1. Sticky 헤더 위젯
플러터에서 Sticky 헤더를 구현하기 위해 SliverAppBar 위젯을 사용할 수 있습니다. SliverAppBar는 스크롤 가능한 뷰와 함께 작동하여 헤더가 스크롤될 때 헤더가 동적으로 축소될 수 있습니다.
SliverAppBar(
pinned: true,
floating: false,
expandedHeight: 200, // 헤더의 최대 높이
flexibleSpace: FlexibleSpaceBar(
title: Text("레시피 목록 앱"),
background: Image.network(
"https://example.com/header_image.jpg",
fit: BoxFit.cover,
),
),
),
pinned 속성은 헤더를 스크롤할 때 항상 화면 상단에 고정할지 여부를 결정하며, floating 속성은 사용자가 위로 스크롤할 때 헤더를 자동으로 화면 위로 올리는지 여부를 결정합니다. expandedHeight는 헤더의 최대 높이를 결정하며, flexibleSpace 속성에는 헤더의 내용을 정의할 수 있습니다.
2. 레시피 목록 구현
레시피 목록을 표시하기 위해 ListView.builder 위젯을 사용할 수 있습니다. 이 위젯은 동적으로 아이템을 생성하므로 효율적인 메모리 사용을 보장합니다.
ListView.builder(
itemCount: recipes.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: Image.network(recipes[index].imageUrl),
title: Text(recipes[index].title),
subtitle: Text(recipes[index].description),
onTap: () {
// 레시피 상세 화면으로 이동
},
);
},
),
위 코드에서 recipes는 레시피 데이터를 담은 리스트입니다. ListView.builder는 itemCount 속성으로 아이템 개수를 설정하고 itemBuilder 속성으로 각 아이템을 생성하는 함수를 정의합니다. 각 아이템은 ListTile 위젯으로 표시되며, leading 속성은 왼쪽에 이미지를 표시하고, title 속성은 제목을, subtitle 속성은 부제목을 설정합니다. onTap 속성은 아이템을 눌렀을 때 동작할 함수를 정의할 수 있습니다.
3. 레시피 상세 화면
레시피 상세 화면으로 이동하기 위해 Navigator.push 메소드를 사용할 수 있습니다. 이 메소드는 새로운 화면을 스택에 추가하여 현재 화면 위에 올리는 역할을 합니다.
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => RecipeDetailPage(recipe: recipes[index])),
);
},
BuildContext는 위젯 트리에서 현재 위치를 나타내는 객체로, 이를 활용하여 현재 화면의 BuildContext를 가져올 수 있습니다. MaterialPageRoute 위젯은 새로운 화면을 생성하기 위해 사용되며, builder 속성으로 새로운 화면을 위한 위젯을 정의합니다. RecipeDetailPage는 레시피 상세 화면을 위한 위젯이며, recipe 인자로 선택한 레시피 정보를 전달하여 표시할 수 있습니다.
4. 결론
위에서 설명한 방법을 활용하여 플러터 Sticky 헤더를 사용한 레시피 목록 앱을 만들었습니다. Sticky 헤더는 사용자 경험을 향상시키고, 앱의 사용성을 개선하는데 큰 도움이 될 수 있습니다. 플러터의 다양한 위젯을 함께 활용하여 자신만의 앱을 개발해보세요!