Listing

행 기반 리스트 컨테이너 (CoListRow + CoListCol)

Listing#

데이터 행(row)을 세로로 쌓는 CoUI 리스트 컨테이너입니다. 각 행은 여러 [CoListCol]을 담고, 지정이 없으면 두 번째 열이 자동으로 남은 공간을 채웁니다. itemBorder: true로 행 사이에 얇은 구분선을 넣을 수 있습니다.

Live Preview#

Web

Alice

alice@example.com

Admin

Bob

bob@example.com

Member

Cam

cam@example.com

Viewer

Flutter

Loading Flutter...

class ListingDefaultExample extends StatelessComponent {
  const ListingDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    final ts = context.theme.typography;
    Component label(String value) => div(
      [Component.text(value)],
      classes: 'text-${ts.bodyMedium} text-${cs.onSurface}',
    );

    return CoListing(
      itemBorder: true,
      children: [
        CoListRow(
          children: [
            CoListCol(child: label('Alice')),
            CoListCol(child: label('alice@example.com')),
            CoListCol(child: label('Admin')),
          ],
        ),
        CoListRow(
          children: [
            CoListCol(child: label('Bob')),
            CoListCol(child: label('bob@example.com')),
            CoListCol(child: label('Member')),
          ],
        ),
        CoListRow(
          children: [
            CoListCol(child: label('Cam')),
            CoListCol(child: label('cam@example.com')),
            CoListCol(child: label('Viewer')),
          ],
        ),
      ],
    );
  }
}

class ListingDefaultExample extends StatelessWidget {
  const ListingDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textColor = theme.colorScheme.onSurface;
    Widget label(String value) => Text(
      value,
      style: theme.typography.bodyMedium.copyWith(color: textColor),
    );

    return CoListing(
      itemBorder: true,
      children: [
        CoListRow(
          children: [
            CoListCol(child: label('Alice')),
            CoListCol(child: label('alice@example.com')),
            CoListCol(child: label('Admin')),
          ],
        ),
        CoListRow(
          children: [
            CoListCol(child: label('Bob')),
            CoListCol(child: label('bob@example.com')),
            CoListCol(child: label('Member')),
          ],
        ),
        CoListRow(
          children: [
            CoListCol(child: label('Cam')),
            CoListCol(child: label('cam@example.com')),
            CoListCol(child: label('Viewer')),
          ],
        ),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

간단한 행/열 구조의 리스트 (사용자·연락처·파일 등)
Card/Table만큼 무겁지 않은 경량 리스트 뷰

대신 다른 컴포넌트를 사용하세요:

Table: 데이터 테이블 (정렬·고정 헤더·cell 기반)
Accordion: 펼침/접힘 트리거가 필요한 경우

기본 사용법 (Basic Usage)#

CoListing(
  itemBorder: true,
  children: [
    CoListRow(
      children: [
        CoListCol(child: Avatar(...)),
        CoListCol(child: Text('Alice')),
        CoListCol(child: Text('Admin')),
      ],
    ),
    CoListRow(
      children: [
        CoListCol(child: Avatar(...)),
        CoListCol(child: Text('Bob')),
        CoListCol(child: Text('Member')),
      ],
    ),
  ],
)

Props / Parameters#

`CoListing`#

속성	타입	기본값	설명
`children`	`List<W>`	필수	`CoListRow` 자식들
`itemBorder`	`bool?`	false	행 사이에 얇은 구분선
`padding`	`EdgeInsetsGeometry?` / `double?`	null	행 내부 기본 padding override
`semanticLabel`	`String?`	null	스크린리더 list landmark 라벨

`CoListRow`#

속성	타입	기본값	설명
`children`	`List<W>`	필수	`CoListCol` 자식들
`padding`	`EdgeInsetsGeometry?` / `double?`	null	이 row의 padding override

Smart container: 어떤 CoListCol도 grow: true를 지정하지 않으면 두 번째 열이 자동으로 grow 됩니다.

`CoListCol`#

속성	타입	기본값	설명
`child`	`W`	필수	열 내용
`grow`	`bool`	false	남은 수평 공간을 채움
`wrap`	`bool`	false	다음 줄로 wrap 허용
`shrink`	`bool`	false	intrinsic 미만으로 축소되지 않음

크로스 플랫폼 차이점 (Platform Differences)#

항목	Flutter	Web
클래스명	`CoListing`/`CoListRow`/`CoListCol`	동일
컨테이너	`Column`	`<div role="list" class="flex flex-col w-full">`
Row	`Padding(Row)`	`<div class="flex flex-row ...">`
Col grow	`Expanded`	`grow` class
Divider	`CoDivider` 위젯 삽입	`CoDivider` 컴포넌트 삽입

Table: 풍부한 테이블 구조
Accordion: 펼침/접힘 리스트