[Flutter Layout] 12. ListView Separated 생성자(구분 위젯이 있는 리스트 만들기)

ListView 기본 기능을 지난 포스트에서 다뤘습니다. ListView의 Separated 생성자로 ListView를 만들어 보도록 하겠습니다. separated로 ListView를 만들면 리스트의 아이템 사이에 구분이 되는 위젯을 자동으로 넣을 수 있습니다.

 

*소스코드는 지난 포스트에서 이어집니다. 전체 소스는 아래쪽에 첨부하였습니다.

---

ListView Separeted 생성자로 ListView만들기

ListView 생성자를 호출하는 대신 ListViewSeparated 생성자를 호출할 수 있습니다. 먼저 List<Widget>을 반환하는 대신 단일 Widget을 반환하는 함수를 만들어 보도록 하겠습니다.

 

리스트의 아이템이 될 위젯을 반환하는 함수 만들기

새롭게 createSingleBox 메소드를 만들었습니다. createSingleBox는 position을 받아와서 Container 위젯의 color를 결정한 후 단일 위젯을 반환하고 있습니다.

 

구분자로 활용될 위젯 만들기

ListViewSepareted 생성자로 ListView를 만들때는 리스트 사이에 들어갈 위젯을 정의할 필요가 있습니다.

createSeparator는 높이 10의 검은색 Container의 위젯을 반환하는 메소드입니다. 이제 빌드 메소드에서 ListView의 ListViewSepareted 생성자를 호출해 보겠습니다.

 

ListView.separated 생성자 호출

ListView.separated 생성자를 호출하고 있습니다.

itemCount 매개변수는 리스트에 넣을 위젯의 개수를 지정할 수 있습니다. 25를 설정하였고 리스트 안의 상자 개수가 25개가 될 것입니다.

itemBuilder는 현재의 context와 항목을 위치를 건네받는 함수를 지정할 수 있고, 그 함수에서 반환되는 위젯이 리스트의 아이템이 됩니다. 화살표 함수를 지정해 주었고 createSingleBox를 호출하여 리스트의 아이템이 될 위젯을 반환하도록 해주었습니다.

separatorBuilder역시 itemBuilder와 같은 방식으로 작동합니다. context와 항목의 위치를 건네받는 함수를 화살표 함수로 만들어 주었고 그 안에서 구분자가 될 위젯을 반환하는 createSeparator를 호출하고 있습니다.

 

앱 화면을 살펴보겠습니다.

보다시피 ListView의 자식 뒤에 검은 구분 위젯이 있습니다.

전체 소스는 아래와 같습니다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'ListView',
        home: Scaffold(
            appBar: 
              AppBar(title: const Text('ListView')
            ), 
            backgroundColor: Colors.indigo.shade100,
            body: const Home()
        )
    );
  }
}

class Home extends StatelessWidget {
  const Home({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final sizeX = MediaQuery.of(context).size.width;
    final sizeY = MediaQuery.of(context).size.height;
    return Container(
      width: sizeX,
      height: sizeY,
      child: ListView.separated(
        itemCount: 25,
        itemBuilder: (context, index) => createSingleBox(index),
        separatorBuilder: (context, index) => createSeparator(index),
        scrollDirection: Axis.vertical,
      )
    );
  }

  Widget createSingleBox(int position) {
    List colors = [Colors.amberAccent, Colors.deepOrangeAccent, 
      Colors.deepPurple, Colors.lightGreen, Colors.lightBlue];
    Container box =  Container(
        color: colors[position % 5],
        width: 100.0,
        height: 100.0,
        child: Text(position.toString())
    );
    return box;
  }

  Widget createSeparator(int position) {
    Widget separator = Container(
      height: 10,
      color: Colors.black,
    );
    return separator;
  }

}

---

여기까지 수고하셨습니다. 다음 포스트에서는 실제적으로 개발에서 활용될법한 ListView의 레이아웃을 만들어 보도록 하겠습니다.