Flutter - ListView

 

서론

어제 상태관리에 대해서밖에 제대로 공부를 안했는데 오늘 오전에 모의면접에 참여했다.

그동안 쌓았던 얕은 지식들을 총동원하고 약간의 합법적인(?) 컨닝페이퍼와 함께 어찌저찌 답변을 하긴 했는데 아무래도 얕은 밑천은 금방 드러나버렸다.

 

그래도 오늘부터 차근차근 핵심 개념들에 대해 다시 돌아보고자 한다.

 

---

Flutter 숙련

ℚ. ListView, ListView.builder, SingleChildScrollView + Column 3가지의 차이점은?

𝔸. 리스트뷰, 리스트뷰 빌더, 싱글차일드스크롤뷰에 칼럼을 넣은 세가지 구조의 차이점을 알아보려면 일단 각 위젯에 대한 이해가 필요하다.

 

 

ListView

여러개의 위젯을 세로로 나열하여 보여주는 위젯이다. 쉽게 말하면 우리가 핸드폰에서 자주보는 스크롤 가능 목록을 만들 수 있게 해준다.

 

ListView(
  children: [
    Text('첫 번째 아이템'),
    Text('두 번째 아이템'),
    Text('세 번째 아이템'),
  ],
)

 

위와 같이 작성하면 세 줄의 텍스트가 차례대로 출력되며 스크롤도 가능하다.

 

하지만 일일이 모든 구성요소를 적어둬야 하는 번거로움이 있다.

그리고 처음부터 끝까지 한번에 그려내기때문에 구성요소가 많아지면 앱이 느려질 수 있다.

(화면에 보이지 않아도 미리 다 만들어둠)

따라서 아이템의 개수가 적을때, 개수가 고정되어있을때 많이 사용한다.

직관적이고 간단하게 구현이 가능하고, 가독성이 좋다.

 

사용예시
앱설정 화면, 공지사항 목록, 짧은 FAQ 같은 정적인 콘텐츠 나열

 

 

ListView.builder

아이템의 개수가 많거나 동적으로 생성할때 사용한다.

 

ListView.builder(
  itemCount: 100, // 아이템 개수
  itemBuilder: (context, index) {
    return Text('아이템 $index');
  },
)

 

리스트뷰 빌더는 구성 요소를 한번에 다 그리지 않고 필요한 것만 그려내기 때문에 메모리가 절약되고 앱 성능이 향상된다.
일단 처음에는 화면에 보이는 양만 그려내고 스크롤할때마다 추가로 필요한 것을 렌더링 한다. (지연 렌더링)

그래서 화면이 부드럽게 잘 스크롤된다.

 

아이템 개수가 많거나 개수가 동적으로 바뀔때 효율적으로 사용할 수 있어 좋다.

 

사용예시
API 호출 데이터, 무한 스크롤, 소셜 미디어 피드, 채팅, 피드백 목록 등 실시간 업데이트 등
(데이터를 실시간으로 받아와 구현)

 

 

ListView.separated (참고용)

아이템 사이에 구분선을 넣고 싶을 때 사용한다.

 

ListView.separated(
  itemCount: 5,  // 리스트에 보여줄 아이템 개수
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('아이템 ${index + 1}'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();  // 아이템 사이에 선 넣기
  },
)

 

잠깐! 여기서 context의 역할은?
→ 위젯의 위치, 환경 등 자신이 포함된 위젯 트리의 정보를 알려주는 매개변수
→ 화면의 크기, 방향, 부모위젯의 스타일, 테마, 다른 위젯으로 이동할 때의 정보 등을 제공

 

아이템 사이에 구분선은 Sizedbox로 넣어도 되고 Divider를 활용해도 좋다.

Divider는 색상, 두께, 여백을 조정할 수 있어 편리하다.

 

 

SingleChildScrollView + Column

칼럼 위젯은 위에서 아래로 쌓는 방식을 사용하는데, 스크롤은 되지 않는다.

칼럼 안에 여러 위젯을 배치한 후 SingleChildScrollView로 감싸면 스크롤이 가능해진다.

 

보통 리스트를 만들때 보다는, 세로로 긴 페이지를 스크롤 하면서 봐야할 때 많이 사용한다.

즉 고정된 길이의 스크롤 영역이 필요할 때 쓴다.

자식 위젯의 높이가 동적으로 변하는 경우, 리스트가 아닌 다양한 위젯 조합에 유용하다.

 

대신 모든 아이템들을 한번에 만들어서 보여주기때문에, 구성요소가 많으면 앱 성능이 저하될 수 있다.

 

사용예시
폼 입력양식 페이지, 반응형 UI 디자인 등

 

SingleChildScrollView(
  child: Column(
    children: [
      Image.asset('assets/banner.png'),
      TextField(),
      ElevatedButton(onPressed: () {}, child: Text('Submit')),
    ],
  ),
)