[flutter] ListView builder, separated widget

플러터 ListVIew 위젯으로 리스트 생성하기

플러터에서는 ListView 위젯을 사용하면 리스트를 간단하게 생성할 수 있습니다. ListView 위젯은 목적에 따라 다양한 방법으로 리스트를 구현할 수 있는데요.

 

간단한 리스트를 만들 때는 ListView() 기본 생성자를, builder 방식으로 구현하려면 ListView.builder(), 리스트 아이템 사이에 구분자를 추가하려면 ListView.separated() 방법을 사용할 수 있습니다.

 

샘플 코드

1. ListView() - 기본 생성자를 이용하는 방법.

class PostList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        Card(...),
        Card(...),
        Card(...),
      ],
    );
  }
}

 

2. ListView.builder() - 빌더를 사용해서 구성하는 방법.

class PostList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: posts.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          ...,
        );
      },
    );
  }
}

 

3. ListView.separated() - 리스트 구분자를 추가하는 방법.

class PostList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.all(8),
      itemCount: posts.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          ...,
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return const Divider();
      },
    );
  }
}

 

코드와 관련해서 궁금한 게 있으시면 댓글 남겨주세요~😊