[flutter] 플러터에서 sticky 헤더를 사용한 관심사 키워드 앱 만들기

30 Nov 2023

flutter

플러터는 크로스 플랫폼 모바일 앱 개발을 위한 Google의 UI 프레임워크입니다. 이번 블로그에서는 플러터에서 sticky 헤더를 사용하여 관심사 키워드 앱을 만드는 방법을 알아보겠습니다.

목표

사용자가 관심있는 키워드를 추가하고 관리할 수 있는 앱을 개발한다.
화면 상단에 sticky 헤더를 추가하여 키워드를 손쉽게 관리한다.
사용자가 키워드를 선택하면 해당 키워드에 대한 상세 정보 페이지로 이동한다.

구현하기

1. sticky 헤더 위젯 만들기

먼저, 플러터에서 sticky 헤더를 만들기 위해 SliverAppBar 위젯을 사용합니다. SliverAppBar는 스크롤 가능한 목록 상단에 고정된 헤더를 제공합니다.

SliverAppBar(
  pinned: true,
  title: Text("관심사 키워드"),
  actions: [
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // 설정 화면으로 이동하는 코드 작성
      },
    ),
  ],
)

pinned 속성을 true로 설정하여 헤더를 스크롤 가능한 목록에 고정시킵니다. title 속성에 헤더에 표시될 제목을 설정하고, actions 속성에 헤더 우측에 추가할 위젯을 설정합니다. 예제에서는 설정 아이콘을 추가하고, 버튼이 눌릴 경우 설정 화면으로 이동하는 코드를 작성합니다.

2. 키워드 추가 기능 구현하기

키워드를 추가하고 관리하기 위해 ListView.builder를 사용하여 스크롤 가능한 목록을 생성합니다.

ListView.builder(
  itemCount: keywords.length,
  itemBuilder: (context, index) {
    final keyword = keywords[index];

    return ListTile(
      leading: CircleAvatar(),
      title: Text(keyword),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {
          // 키워드 삭제 기능 구현 코드 작성
        },
      ),
    );
  },
)

keywords는 키워드 목록을 담은 리스트입니다. itemBuilder 콜백 함수에서 각 키워드에 대해 리스트 타일을 생성합니다. 예제에서는 간단히 키워드를 출력하고, 우측의 삭제 아이콘 버튼이 눌릴 경우 키워드를 삭제하는 로직을 구현합니다.

3. 상세 정보 페이지로 이동하기

사용자가 키워드를 선택하면 해당 키워드의 상세 정보 페이지로 이동해야 합니다. 이를 위해 Navigator를 사용하여 페이지 이동을 구현합니다.

ListTile(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => KeywordDetailPage(keyword)),
    );
  },
)

ListTile 위젯에 onTap 속성을 추가하고, 사용자가 타일을 탭하면 Navigator.push를 호출하여 상세 정보 페이지로 이동합니다. MaterialPageRoute를 사용하여 페이지 이동을 설정하고, KeywordDetailPage 생성자에 선택한 키워드를 전달합니다.

마무리

위의 단계를 따라가면 sticky 헤더와 키워드 추가, 삭제, 상세 정보 페이지 이동 등의 기능을 포함한 관심사 키워드 앱을 플러터로 개발할 수 있습니다. 플러터는 간편한 UI 개발을 위한 다양한 기능을 제공하므로, 앱을 보다 쉽게 개발할 수 있습니다.

더 많은 플러터 개발 관련 정보는 플러터 공식 문서를 참고하세요.