[Flutter] Listview.builder 사용법 및 UI 구상

 

ListView.builder는

몇 개의 항목을 만들건지 = itemCount

itemCount : int값이며 ListView 항목들의 총개수에 해당한다. 단, 주어지지 않으면 무한히 항목을 만든다.

몇 번재 항목에는 어떤 View를 그려줄지 = itemBuilder

itemBuilder(BuildContext ctx, int idx) : idx번째에 해당하는 항목에 그려질 View를 반환하는 함수이다. idx는 0부터 시작한다.

를 알려주어야 한다.

 

그래서 보통 코드는 아래와 같다.

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 3,
        itemBuilder: (context, index)
    {
      return Text("example");
    });

이렇게 해주면, 결과는 아래와 같이 보여진다.

 

 

ListView 파라미터

항목을 역순으로 출력 = reverse

reverse : true 인 경우 항목을 역순으로 그리도록 함.

상하가 아닌 좌우 스크롤 = scrollDirection

scrollDirection : Axis.horizontal 인 경우 가로방향으로 항목이 나열되며, 가로방향으로 스크롤이 됨.

 

ListView.separated 사용법

ListView의 항목 사이에 구분선을 넣어주고 싶을 수 있다.

귀찮은 방법은 ListView.builder에서 itemBuilder에서 idx에 따라 내용을 그리거나 구분자를 직접 코드에 추가할 수 있다.(이걸 안보고 그렇게 한 나...)

 

이런 느낌으로 했다.

Container(
      decoration: BoxDecoration(
          border: Border(
              bottom: BorderSide(
                color: Colors.grey,
              )
          )
      ),

ListView.separated를 활용하면 더 간편하게 할 수 있다.

itemCount, itemBuilder의 인자들은 동일하고, 추가적으로 separatorBuilder의 값을 넘겨주어야 한다.

separatorBuilder(BuildContext ctx, int idx) : idx번째 구분선을 어떤 View로 그려줄지 결정하는 함수이다.

아래의 코드를 변경하고, 결과를 확인해보자

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemCount: clubList.length,//widget.selectedList.length,
        itemBuilder: (context, index)
    {
      return Text("example");
    }, separatorBuilder: (BuildContext context, int index) {
      return const Divider();
    },
  );
}

결과로 사이사이에 선과 약간의 padding이 생긴것을 확인할 수 있다.

 

 

좀 UI를 꾸며보자

이런 느낌으로 진행해보겠다.

큰 ListView.builder 안에 Column-1에는 image, Column-2에는 text들!

Column-2에는 Row를 총 3개로, title-detail-heart count 순으로 진행할 것이다.

 

일단락 완성!

list.length 로 알맞게 뜨는 것을 확인 할 수 있다.

 

+ flutter 하트 icon은 icon.favorite 이다..