[flutter] 플러터에서 훅(hook)을 활용하여 무한 스크롤 기능 구현하기

14 Dec 2023

flutter

1. 훅(hook)에 대한 소개

훅(hook)은 리액트(React)나 플러터(Flutter)와 같은 프레임워크에서 상태와 생명 주기(effects) 기능을 함수 컴포넌트에서 사용할 수 있도록하는 기능입니다. 플러터에서는 flutter_hooks 패키지를 통해 훅을 사용할 수 있습니다.

2. 플러터에서의 훅(hook) 활용

사용 예시

플러터에서 flutter_hooks 패키지를 이용하여 훅을 활용하는 방법은 아래와 같습니다.

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var count = useState(0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('훅 활용 예시'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('버튼 클릭 횟수:'),
              HookBuilder(
                builder: (context) {
                  return Text(
                    '${count.value}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => count.value++,
          tooltip: '증가',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

무한 스크롤 구현하기

무한 스크롤을 구현하기 위해서는 flutter_hooks 패키지의 useEffect 훅을 사용하여 스크롤 위치를 감시하고, 리스트의 끝에 도달할 때 추가 데이터를 불러오는 방법을 활용할 수 있습니다.

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var scrollController = useScrollController();
    var list = useState(List<String>.generate(20, (index) => 'Item $index'));

    useEffect(() {
      scrollController.addListener(() {
        if (scrollController.position.pixels == scrollController.position.maxScrollExtent) {
          // 끝에 도달했을 때 추가 데이터 로딩 로직
          // ...
        }
      });
      return () {
        scrollController.dispose();
      };
    }, []);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('무한 스크롤'),
        ),
        body: ListView.builder(
          controller: scrollController,
          itemCount: list.value.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(list.value[index]));
          },
        ),
      ),
    );
  }
}

3. 결론

플러터의 flutter_hooks 패키지를 통해 훅을 활용하여 간편하게 상태와 생명 주기 관리를 할 수 있습니다. 무한 스크롤을 구현할 때도 useEffect 훅을 사용하여 스크롤 감시 및 추가 데이터 로딩을 효과적으로 처리할 수 있습니다.

위 예시 코드를 참고하여 플러터에서 훅을 활용하여 무한 스크롤 기능을 구현해보세요.

목차

1. 훅(hook)에 대한 소개

2. 플러터에서의 훅(hook) 활용

사용 예시

무한 스크롤 구현하기

3. 결론