Flutter ListView 사용해보기

LIST갯수가 적고, 정해져있을 경우

Widget _buildSuggestions() {
    return ListView(
      padding: const EdgeInsets.all(8),
      children: [
        Container(
            height: 50,
            color: Colors.amber[600],
            child: const Center(
              child: Text("Entry A"),
            )),
        Container(
            height: 50,
            color: Colors.amber[500],
            child: const Center(
              child: Text("Entry A"),
            )),
        Container(
            height: 50,
            color: Colors.amber[400],
            child: const Center(
              child: Text("Entry A"),
            )),
      ],
    );
  }

리스트를 그려줄 데이터가 정해져있고, 그 수가 적다면 위 코드처럼 children을 이요해서 자식 요소들을 넣어주면된다

 

LIST 갯수가 많을 경우, 유동적일 경우

class _RandomWordsState extends State<RandomWords> {
  final List<String> entries = ['num1', 'num2', 'num3', 'num4', 'num5', 'num6'];
  final List<int> colorCodes = [600, 500, 400, 300, 200, 100];
  @override
  Widget build(BuildContext context) {
    return _buildSuggestions();
  }

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: entries.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 50,
          color: Colors.amber[colorCodes[index]],
          child: Center(child: Text("Entery ${entries[index]}")),
        );
      },
    );
  }
}

배열을 순회하면서 생성함

 

separater (구분선)을 넣어주고 싶다면

  Widget _buildSuggestions() {
    return ListView.separated(
      padding: const EdgeInsets.all(8),
      itemCount: entries.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 50,
          color: Colors.amber[colorCodes[index]],
          child: Center(child: Text("Entery ${entries[index]}")),
        );
      },
      separatorBuilder: (BuildContext context, int index) => const Divider(),
    );
  }
}

위 builder 코드에서

builder -> separated 로 변경해주고

separatorBuilder 옵션을 필수적으로 넣어주면된다

 

(BuildContext context, int index)

이부분은 필수 파라미터인것 같다

---

height 속성을 따로 넣어주지 않으면, 각 아이템들의 길이마다 가변적으로 변한다