들어가며

ListView.builder 또는 ListView.separated 등을 활용할 때 itemBuilder를 통해서 출력할 item widget을 리턴하게 되는데, 이때 마지막 부분에 footer를 넣거나 margin을 주어야하는 경우가 있다.

기본적인 ListView와는 다르게 builder 함수를 사용하는 경우 단순하게 위젯을 넣기가 곤란하다. 이는 간단하게 해당 아이템이 마지막 아이템인지 또는 첫번째 아이템인지를 체크하여 분기시키는 로직만 추가하면 된다.

다음은 itemBuilder를 활용하여 리스트의 마지막에 FooterWidget을 추가하는 간단한 예제 코드다.

구현

// data - item List
ListView.separated(
itemCount : data.length
itemBuilder : (context, index){
    // last item인지 확인하는 조건문 사용
    // 마지막 아이템인 경우에만 FooterWidget이 위젯트리에 생성된다.
    if(index == data.length -1){
        return Column(
            children: [
                ItemWidget(item: data[index]),
                FooterWidget(),
            ],
        );
    } else {
        return ItemWidget(item: data[index])
    }
}
)

다음과 같이 구현하면 마지막 아이템 아래에만 필요한 Footer 위젯이 생성된다. 동일한 방법으로 첫번째 아이템 위쪽에만 SizedBox()를 활용해서 margin을 주는 방법도 존재한다.

결론

Footer가 아니더라도 보통 리스트의 마지막 공간에는 마지막 아이템임을 표시하는 indicator를 두거나 margin을 두는 경우가 있는데 이럴 때도 활용할 수 있으며, Infinite scroll pagination 패키지를 사용할 때도 builder를 통해서 위젯을 생성하기 때문에 알아두면 여기저기 유용하게 써먹을 수 있는 방법인 것 같다.