[Flutter] 동적 리스트 ListView

Swift의 UITableView 와 비슷한 역할을 하는 위젯이다.

아래처럼 사용할 수 있는데 feeds list가 있다면 이를 동적으로 보여준다.
ListView.builder 를 사용한다

List<Feed> feeds = [...]

@override
Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(20),
      scrollDirection: Axis.vertical,
      itemCount: feeds.length,
      itemBuilder: (context, index) {
        return FeedWidget(recruit: feeds[index]);
      },
    );
}

 

List 사이에 여백이나 구분선을 주고 싶다면
ListView.separated 를 사용한다.

separatorBuilder 파라미터를 구현해주면 되고 여백이 필요하다면 Divider가 아닌 SizedBox를 넣어주면 된다.

 @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.all(20),
      scrollDirection: Axis.vertical,
      itemCount: feeds.length,
      itemBuilder: (context, index) {
        return RecruitFeed(recruit: feeds[index]);
      },
      separatorBuilder: (context, index) => SizedBox(height: 20),
    );
  }
}