[flutter] 플러터에서 sticky 헤더를 사용한 실시간 검색어 앱 만들기

30 Nov 2023

flutter

이번에는 플러터에서 sticky 헤더를 사용하여 실시간 검색어 앱을 만들어보겠습니다. Sticky 헤더는 스크롤을 할 때 항상 화면 상단에 고정되어 있는 헤더를 말합니다. 이를 이용하면 검색어 입력창을 항상 화면 상단에 유지할 수 있게 됩니다.

프로젝트 설정

먼저 Flutter SDK를 설치합니다.
새로운 Flutter 프로젝트를 생성합니다.
```
flutter create sticky_header_example
```

패키지 설치

sticky_header 패키지를 사용하여 sticky 헤더를 구현할 예정입니다. 이를 위해 pubspec.yaml 파일에 다음 코드를 추가합니다.

dependencies:
  sticky_header: ^0.4.0

그리고 패키지를 설치합니다.

flutter pub get

UI 구성

main.dart 파일을 열고 MaterialApp 위젯을 수정합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Header Example',
      home: HomePage(),
    );
  }
}

HomePage 클래스를 생성합니다.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky Header Example'),
      ),
      body: ListView.builder(
        itemCount: 100, // 임의의 아이템 개수
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

검색어 입력창을 Sticky 헤더로 만들기 위해 StickyHeaderBuilder 위젯을 사용합니다. HomePage 클래스의 body 위젯을 다음으로 수정합니다.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky Header Example'),
      ),
      body: StickyHeaderBuilder(
        builder: (BuildContext context, double stuckAmount) {
          return Container(
            height: 60.0,
            color: Colors.blue,
            child: Center(
              child: TextField(
                decoration: InputDecoration(
                  hintText: 'Search',
                  border: InputBorder.none,
                ),
              ),
            ),
          );
        },
        content: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

앱을 실행하고 스크롤을 테스트해보세요. 검색어 입력창이 항상 화면 상단에 고정되어 있는 것을 확인할 수 있습니다.

결론

플러터의 sticky_header 패키지를 사용하여 실시간 검색어 앱을 만드는 방법을 알아보았습니다. 이를 추가적으로 확장하여 여러 기능을 구현할 수 있습니다. 만약 해당 패키지로 동작하지 않는 경우, 여기에서 다른 sticky 헤더 관련 패키지를 찾아볼 수도 있습니다.