리스트뷰 (ListView)

Flutter에서 데이터 목록을 표시하고 스크롤하는 데 사용되는 중요한 위젯 중 하나입니다. 이 위젯은 동적으로 데이터를 생성하여 스크롤 가능한 목록을 만들 수 있도록 도와줍니다.

기본 리스트 뷰

ListView.builder는 아이템의 개수와 아이템을 동적으로 생성하는 함수를 제공합니다. 이를 통해 메모리 효율적으로 큰 목록을 처리할 수 있습니다.

ListView.builder(
  controller: controller, // 스크롤 컨트롤러
  itemCount: 15, // 아이템 개수
  itemBuilder: (context, index) { // 아이템 생성 함수
    return Card(
      margin: EdgeInsets.all(15),
      elevation: 3,
      child: ListTile(
        contentPadding: EdgeInsets.all(50),
        title: Text(items[index]),
      ),
    );
  },
);

controller: 스크롤을 제어하는 데 사용되는 ScrollController를 지정할 수 있습니다.
itemCount: 목록에 표시할 아이템의 총 개수를 지정합니다.
itemBuilder: 아이템을 생성하는 함수로, 인덱스별로 호출되며 해당 인덱스에 표시할 위젯을 반환합니다.

위의 코드에서는 15개의 아이템을 가진 ListView.builder를 생성하고 있으며, 각 아이템은 Card와 ListTile을 포함하는 형태로 구성됩니다. items라는 문자열 목록을 사용하여 간단한 리스트를 생성하고 있습니다.

무한 스크롤 리스트뷰

무한 스크롤 리스트뷰는 사용자가 스크롤을 끝까지 내릴 때마다 자동으로 추가 데이터를 로드하여 리스트를 확장하는 기능을 제공하는 위젯입니다. 이를 위해 ListView.builder를 사용하고, 스크롤 위치가 일정 지점에 도달하면 새로운 아이템을 불러오는 방식으로 구현할 수 있습니다.

ListView.builder(
            itemBuilder: (BuildContext context, int i) {
              return Card(
                elevation: 3,
                child: ListTile(
                  title: Text("List Item"),
                ),
              );
            },
          );

위의 코드는 무한 스크롤 리스트뷰를 구현한 예제입니다. 사용자가 리스트의 끝까지 스크롤하면 새로운 아이템을 자동으로 로드하고, 로딩 중에는 로딩 인디케이터를 표시합니다. 이 코드를 참고하여 필요한 데이터를 로드하는 방식으로 무한 스크롤 리스트뷰를 만들 수 있습니다.

리스트뷰 슬라이드

Flutter 앱에서 리스트 항목을 슬라이드하여 추가 작업을 수행하는 기능은 사용자 경험을 향상시키는 데 유용한 기능 중 하나입니다. 이를 위해 flutter_slidable 패키지를 사용하여 리스트뷰 슬라이딩을 구현할 수 있습니다.

flutter_slidable 패키지란?

flutter_slidable 패키지는 Flutter 앱에서 슬라이드 가능한 항목을 구현하는 데 도움을 주는 패키지입니다. 이 패키지를 사용하면 사용자가 항목을 좌우로 슬라이드하여 추가 작업을 수행할 수 있습니다. 이 패키지를 사용하면 아래와 같은 작업을 할 수 있습니다.

아이템 슬라이드 시 주요 작업과 보조 작업 정의
아이템 삭제 또는 아카이브와 같은 작업 확인 기능 제공
사용자에게 알림 메시지 표시

예제 코드 설명

주어진 코드 예제에서는 flutter_slidable 패키지를 사용하여 리스트뷰 슬라이딩을 구현하고 있습니다. 예제에서 사용하는 주요 구성 요소는 다음과 같습니다.

Slidable: 리스트 항목을 둘러싸는 위젯으로, 슬라이딩 작업을 설정할 수 있습니다. 각 Slidable은 시작 및 끝 작업 패널을 가질 수 있습니다.
시작 및 끝 작업 패널: 각 패널에는 슬라이딩 동작과 관련된 작업을 정의합니다. 주요 작업 및 보조 작업을 설정할 수 있으며, 아이콘 및 레이블을 표시할 수 있습니다.
DismissiblePane: 항목을 삭제하거나 아카이브하는 동작을 수행하는 패널입니다. 이 패널은 confirmDismiss 함수를 통해 사용자에게 동작 확인을 요청합니다.

액션 패널 및 작업 설정

각 Slidable 위젯은 시작 및 끝 작업 패널을 가지며, 패널에는 슬라이딩으로 실행할 작업이 포함됩니다. 예제에서는 "Archive" 및 "Share"와 같은 주요 작업 및 "More" 및 "Delete"와 같은 보조 작업을 설정하고 있습니다.

final mainActions = <Widget>[
  SlidableAction(
    label: 'Archive',
    foregroundColor: Colors.blue,
    icon: Icons.archive,
    onPressed: (_) => _showSnackBar('Archive'),
  ),
  // ...
];

final secondaryActions = <Widget>[
  SlidableAction(
    label: 'More',
    foregroundColor: Colors.black45,
    icon: Icons.more_horiz,
    onPressed: (_) => _showSnackBar('More'),
  ),
  // ...
];

슬라이딩 항목 구성

각 슬라이딩 항목은 Slidable 위젯을 통해 구성됩니다. Slidable 위젯은 시작 및 끝 작업 패널을 정의하고, 이 패널에 작업을 할당합니다.

Slidable(
  key: ValueKey(entry.key),
  startActionPane: ActionPane(
    motion: entry.value,
    extentRatio: 0.2,
    children: mainActions,
  ),
  endActionPane: ActionPane(
    motion: entry.value,
    extentRatio: 0.2,
    children: secondaryActions,
  ),
  child: ListTile(
    // ...
  ),
)

슬라이딩 항목 삭제 기능

슬라이딩 항목 중 하나는 삭제할 수 있는 기능을 제공합니다. 이를 위해 DismissiblePane를 사용하여 아이템을 삭제할 수 있도록 설정하고, confirmDismiss를 통해 삭제 전 확인 다이얼로그를 표시합니다.

final dismissal = DismissiblePane(
  onDismissed: () {
    _showSnackBar('Dismiss Archive');
    setState(() => this._items.removeAt(_items.length - 1));
  },
  confirmDismiss: () async {
    final bool? ret = await showDialog<bool>(
      context: context,
      builder: (context) {
        return AlertDialog(
          // ...
        );
      },
    );
    return ret ?? false;
  },
);

Flutter 앱에서 flutter_slidable 패키지를 사용하여 리스트뷰 슬라이딩을 구현하는 방법에 대한 설명을 참고하여, 이를 활용한 사용자 친화적인 UI를 만들어보세요.

그리드뷰(GridView)

리스트뷰와 마찬가지로 Flutter에서 데이터 목록을 표시하고 스크롤하는 데 사용되는 위젯입니다. 주로 사진 갤러리등에 사용됩니다.

GridView.builder(
          controller: controller,
          itemCount: 15,
          itemBuilder: (context, index) {
            return Card(
              margin: EdgeInsets.all(20),
              elevation: 3,
              child: ListTile(
                contentPadding: EdgeInsets.all(20),
                title: Text(items[index]),
              ),
            );
          },
          scrollDirection: scrollDirection,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, childAspectRatio: 1, crossAxisSpacing: 10),
        )

itemBuilder: 아이템을 생성하는 함수로, 인덱스별로 호출되며 해당 인덱스에 표시할 위젯을 반환합니다.
itemCount: 목록에 표시할 아이템의 총 개수를 지정합니다.
controller: 스크롤을 제어하는 데 사용되는 ScrollController를 지정할 수 있습니다.

Previous바텀시트 (BottomSheet)Next슬리버 (Sliver)

Last updated 7 months ago