[flutter] 플러터에서 sticky 헤더를 사용한 검색 필터 앱 디자인하기

30 Nov 2023

flutter

플러터는 Google에서 개발한 UI 프레임워크로, 여러 플랫폼에서 동작하는 모바일 애플리케이션을 만들 수 있습니다. 이 튜토리얼에서는 플러터의 sticky 헤더를 사용하여 검색 필터 앱을 디자인하는 방법에 대해 알아보겠습니다.

검색 필터 앱 개요

검색 필터 앱은 사용자가 원하는 정보를 검색할 수 있는 기능을 제공하는 애플리케이션입니다. 사용자는 검색 키워드를 입력하고, 원하는 필터를 설정하여 결과를 필터링할 수 있습니다.

sticky 헤더 개요

sticky 헤더는 스크롤이 일정 위치를 넘어가면 화면 상단에 고정되는 헤더입니다. 이러한 sticky 헤더를 사용하면 화면 상단에 메뉴, 로고 또는 다른 중요한 UI 요소를 고정하여 사용자가 항상 참조할 수 있습니다.

검색 필터 앱 디자인

이제 검색 필터 앱의 디자인을 시작해보겠습니다.

검색 바 디자인

먼저, 검색 바를 디자인해야 합니다. 사용자가 검색 키워드를 입력할 수 있는 텍스트 필드를 추가합니다. 이 텍스트 필드는 사용자의 입력에 따라 결과를 실시간으로 업데이트해야 합니다.

TextField(
  onChanged: (value) {
    // 사용자의 입력에 따라 검색 결과 업데이트
  },
)

필터 버튼 디자인

다음으로, 필터 버튼을 디자인합니다. 이 버튼을 누르면 필터 설정 창이 표시되어 사용자가 원하는 필터를 선택할 수 있습니다. 필터 버튼은 검색 바 옆에 배치되어야 합니다.

IconButton(
  icon: Icon(Icons.filter_list),
  onPressed: () {
    // 필터 설정 창 열기
  },
)

sticky 헤더 디자인

이제 sticky 헤더를 디자인해보겠습니다. 검색 바와 필터 버튼을 포함하는 헤더를 생성하고, 스크롤이 일정 위치를 넘어가면 헤더가 화면 상단에 고정되도록 설정합니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      title: Text('Search Filter App'),
      actions: [
        IconButton(
          icon: Icon(Icons.filter_list),
          onPressed: () {
            // 필터 설정 창 열기
          },
        ),
      ],
    ),
    // 검색 결과 표시
  ],
)

검색 결과 디자인

마지막으로, 검색 결과를 디자인해야 합니다. 검색 결과는 스크롤 가능한 리스트 형태로 표시되어야 합니다. 사용자가 스크롤하여 결과를 탐색할 수 있어야 합니다.

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      // 검색 결과 아이템 디자인
    },
    childCount: // 결과 아이템 개수,
  ),
)

이제 위의 코드를 이용하여 플러터에서 sticky 헤더를 사용한 검색 필터 앱을 디자인할 수 있습니다. 플러터의 다양한 위젯과 기능을 활용하여 사용자가 쉽고 편리하게 원하는 정보를 검색할 수 있는 앱을 만들어보세요.

목차