[Flutter] ListView.builder로 반복되는 부분 만들기

반복되는 부분을 손수 쓰지 않고 반복해서 만들 수 있다. 이 때 쓸 수 있는 것이 ListView.builder 이다. 

 

 

◾ Example

지금부터 만들어 볼 부분인데 보라색이 list_view부분이고 icons가 파란색부분이다

 

 

◾ Code

list_view에 반복되는 부분을 따로 파일(icons.dart)로 빼서 더하는거다. 

 

 

list_view.dart

                Container(
                  margin: EdgeInsets.only(top: 10, bottom: 20),
                  child: Text('${descList[index]}'),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      '${majorList[index]}',
                      style: TextStyle(color: Colors.grey),
                    ),
                    Container(
                      child: iconList(),
                    ),
                  ],
                ),
              ]));

이 부분을 찾아보려고 구글링을 엄청했는데, 다들 body:에 대입하는거만 있어서 container나 다른 widget에는 어떻게 대입해야하는걸까?라며 고민을 진짜 많이 했었다. 결론적으로는 별것 없었다. Row 안에 widget부분에 뭘 넣을 수 있을까했을 때 Container을 생각했고, 그 안에 child로 넣어줬다. 

 

 

 

 

icons.dart

class iconList extends StatefulWidget {
  @override
  _iconState createState() => _iconState();
}

class _iconState extends State<iconList> {
  final List<String> iconsArr = <String>[
    'icons/picture_cnt.svg',
    'icons/like_cnt.svg',
    'icons/comment_cnt.svg',
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 110,
        height: 20,
        margin: EdgeInsets.all(10),
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: iconsArr.length,
            itemBuilder: (context, index) {
              return Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(children: <Widget>[
                    SvgPicture.asset('${iconsArr[index]}', width: 20),
                    Text('2')
                  ]));
            }));
  }
}

 

◾ statefulWidget은 처음 만들어봐서 아직 익숙하지는 않은데, state가 필요하고 반복할 배열도 필요하다. 나는 아이콘 경로를 넣어줄 것이라서 String으로 선언해서 리스트를 만들어줬다. 

◾ ListView.builder를 하면 디폴트값이 vertical이라서 가로로 정렬해줘야해서 scrollDirection을 Axis.horizontal을 넣어줬다. 

◾ itemCount는 반복되는 횟수를 나타내는 거라서 반복되어야 할 리스트의 길이값을 넣어줬다.