[Flutter] ListView 위젯

flutter의 ListView 를 만들어보겠습니다.

 

 

[1] 문서보기

 

리스트로 그려줄 데이터가 다 정해져있고 몇개 안된다면

아래처럼 해주면 됩니다. 

 

https://api.flutter.dev/flutter/widgets/ListView-class.html

 

하지만 데이터가 많다면

ListView.builder 를 사용해주면 됩니다.

 

 

그리고 리스트에 구분선을 넣고 싶다면

ListView.separated.를 사용해주면 됩니다.

 

 

참고로 Divider는 material 디자인에 있는 위젯이여서 (cupertino 위젯에는 Divider 없는 것 같아요)

import 해줘야합니다. 

import 'package:flutter/material.dart';

 

 

[2] 더미데이터로 리스트뷰 만들어보기

일단 더미데이터로 ListView.separated. 를 이용하여 리스트를 만들어볼게요-!

각 Cell의 height를 따로 안넣어주면 텍스트 사이즈에 따라서 늘어나게 된답니다. 

 

 

[3] API에서 받아온 데이터로 리스트뷰 만들어보기

 

 

위젯이 초기화될때 api 콜을 합니다. 

setState에서 받아온 데이터를 questions에 넣어주면

questions을 들고 있는 위젯이 업데이트 됩니다-!