[Flutter] 리스트뷰 양쪽 끝부분만 마진 넣기

 

배민의 최근 주문 목록처럼 양쪽 끝단만 마진이 들어가고 그 사이 뷰들은 화면에 꽉차도록 출력되길 원했다.

처음엔 if문을 사용해 첫뷰와 마지막 뷰만 마진값을 다르게 주려했더니 설정할 뷰 인덱스를 상수값으로 넘겨줘야한단다

뷰 갯수가 달라질 수 있으므로 상수로 전달할 수는 없는 노릇이다

 

 

분명 나와 비슷한 고민을 하는 사람이 있을것 같아 검색해보니 생각보다 간단했다.

ListView.builder 에서 padding 값을 주면 간단히 해결되었다. 

패딩을 리스트뷰가 보여지는 영역 자체에 주어진다고 생각해서 스크롤 할 때 공백이 생길걸 우려해서 이 방법은 고려조차 안했었는데 생각해보니 그냥 리스트뷰 전체를 하나의 위젯으로 보면 양쪽 끝부분에만 패딩이 들어가는게 당연했다.

 

ListView.builder(
    padding: EdgeInsets.only(left: 10, right: 10),
    itemCount: cards.length,
    itemBuilder: (context, index) {
       return MyCard(
           title: cards[index].title,
       );
    },
)

 

reference: https://stackoverflow.com/questions/54362783/how-to-add-padding-top-of-the-listview-builder-in-flutter