플러터 앱을 개발할 때, 사용자가 스크롤 액션을 하는 동안에는 데이터가 로딩되고 있음을 알려주는 것이 중요합니다. 이러한 상황에서 플러터의 ProgressInidcator 위젯을 사용하여 스크롤 액션 진행 상태를 표시할 수 있습니다.

1. ProgressIndicator 추가

먼저, 스크롤 액션 진행 상태를 표시할 위치에 ProgressInidcator 위젯을 추가합니다. 예를 들어, ListView나 GridView 등의 위젯 안에 추가하여 사용할 수 있습니다.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
    return // 위젯 빌드
  },
  controller: _scrollController,
),

...

ProgressIndicator(
  value: // 진행 상태 값,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. Scroll Controller와 Value 설정

ListView나 GridView 등의 스크롤 위젯은 스크롤에 대한 이벤트를 감지하는 Scroll Controller를 사용할 수 있습니다. Scroll Controller를 생성한 후에는 추가한 ProgressIndicator의 value를 Scroll Controller의 위치에 따라 변경하도록 설정해야 합니다.

ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      setState(() {
        // 데이터 로딩 및 ProgressIndicator의 value 값 변경
      });
    }
  });
}

위 코드는 Scroll Controller를 생성하고, addListener 메서드를 사용하여 스크롤 위치가 끝에 도달했을 때 _scrollController.position.pixels 값과 _scrollController.position.maxScrollExtent 값을 비교하여 데이터 로딩 상태를 변경하여 ProgressIndicator의 value 값을 조절할 수 있도록 합니다.

ProgressIndicator의 value는 0.0부터 1.0 사이의 값을 가지며, 진행 상태를 나타냅니다.

위와 같이 설정하면, 사용자가 스크롤 액션을 하는 동안에 ProgressIndicator가 진행 상태를 표시하여 데이터 로딩 중임을 알려줄 수 있습니다.