32. Flutter ListView 사용법: 효과적인 리스트 구현 전략 | Flutter

 

Flutter에서 리스트를 생성하고 사용하는 방법: 단계별 가이드

 

01. 서론

1) Flutter의 소개 및 중요성

Flutter의 장점과 특징

Flutter는 구글에서 개발한 오픈소스 UI 소프트웨어 개발 키트로, 하나의 코드베이스로 안드로이드, iOS, 웹, 데스크톱 등 다양한 플랫폼에서 애플리케이션을 개발할 수 있게 해줍니다. Flutter의 주요 장점과 특징은 다음과 같습니다:

• 단일 코드베이스: 하나의 코드베이스로 여러 플랫폼에서 애플리케이션을 실행할 수 있어, 개발 시간과 비용을 절감할 수 있습니다.
• 풍부한 위젯: Flutter는 다양한 커스텀 위젯을 제공하여, 개발자가 원하는 대로 UI를 구성할 수 있습니다. 이러한 위젯은 고도로 최적화되어 있어 성능이 뛰어납니다.
• Hot Reload: 코드 변경 시 즉시 결과를 확인할 수 있는 Hot Reload 기능을 통해, 개발자는 빠르게 UI를 수정하고 디버깅할 수 있습니다.
• 높은 성능: Flutter는 네이티브 코드로 컴파일되므로, 성능이 매우 뛰어납니다. 이는 네이티브 애플리케이션과 유사한 사용자 경험을 제공합니다.

다양한 플랫폼에서의 사용 가능성

Flutter는 안드로이드와 iOS뿐만 아니라 웹과 데스크톱 플랫폼에서도 애플리케이션을 실행할 수 있습니다. 이를 통해 Flutter로 개발된 애플리케이션은 다양한 기기에서 일관된 사용자 경험을 제공합니다. Flutter의 다중 플랫폼 지원은 개발자에게 큰 이점을 제공하며, 다양한 사용자 층을 확보할 수 있는 기회를 제공합니다.

2) 리스트 사용의 필요성

데이터 표시를 위한 리스트의 중요성

리스트는 모바일 애플리케이션에서 데이터를 표시하는 기본적인 패턴 중 하나입니다. 사용자 인터페이스에서 데이터를 효율적으로 정렬하고 표시하는 데 리스트는 매우 유용합니다. 리스트는 사용자에게 직관적인 방식으로 정보를 제공하며, 탐색과 상호작용을 쉽게 할 수 있게 해줍니다.

Flutter에서 리스트 작업의 편리함

Flutter에서는 `ListView` 위젯을 통해 쉽게 리스트를 생성하고 사용할 수 있습니다. `ListView`는 많은 양의 데이터를 스크롤 가능한 리스트 형태로 표시할 수 있으며, 다양한 구성 옵션을 제공합니다. 또한, `ListTile` 위젯을 사용하면 리스트 항목에 아이콘, 텍스트, 버튼 등을 간단하게 추가할 수 있습니다.

ListView(
  children: const <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

위 예제는 `ListView`와 `ListTile`을 사용하여 간단한 리스트를 생성하는 코드입니다. 이 코드는 세 개의 리스트 항목을 포함하며, 각 항목에는 아이콘과 텍스트가 포함되어 있습니다.

 

`ListView`는 기본적으로 모든 자식 위젯을 수직으로 나열합니다. 필요에 따라 `ListView.builder`, `ListView.separated`와 같은 다른 생성자를 사용하여 더 복잡한 리스트를 생성할 수도 있습니다. 이러한 옵션들은 리스트를 동적으로 생성하거나, 리스트 항목 사이에 구분선을 추가하는 등의 작업을 쉽게 할 수 있게 해줍니다.

 

Flutter를 사용하면 리스트 작업이 매우 편리해지며, 다양한 UI 요소를 손쉽게 추가할 수 있습니다. 이를 통해 사용자는 더 나은 사용자 경험을 제공하는 애플리케이션을 개발할 수 있습니다.

 

02. 기본 ListView 생성

1) ListView 위젯 소개

ListView의 역할과 기능

`ListView`는 Flutter에서 스크롤 가능한 리스트를 만드는 데 사용되는 위젯입니다. 모바일 애플리케이션에서는 많은 양의 데이터를 효율적으로 표시하기 위해 리스트 형태의 UI가 자주 사용됩니다. `ListView`는 이러한 리스트를 쉽게 생성하고 관리할 수 있게 해줍니다.

주요 기능:

• 스크롤 가능한 리스트를 제공하여 많은 데이터를 한 화면에서 볼 수 있습니다.
• 동적 데이터 로딩을 지원하여 성능을 최적화할 수 있습니다.
• 다양한 생성자를 통해 리스트를 쉽게 구성할 수 있습니다(`ListView`, `ListView.builder`, `ListView.separated` 등).

ListView 생성 방법

Flutter에서 기본적인 `ListView`를 생성하는 방법은 매우 간단합니다. 다음은 몇 가지 예제 코드입니다:

ListView(
  children: const <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

위 코드는 세 개의 `ListTile` 위젯을 포함한 간단한 `ListView`를 생성합니다. 이 리스트는 스크롤 가능하며, 각 항목은 아이콘과 텍스트를 포함합니다.

 

또한, `ListView.builder`를 사용하여 동적으로 리스트를 생성할 수도 있습니다. 다음은 `ListView.builder`를 사용한 예제입니다:

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.list),
      title: Text('Item $index'),
    );
  },
)

이 코드는 100개의 항목을 동적으로 생성하여 `ListView`에 표시합니다. `itemBuilder`는 각 항목을 생성하는 콜백 함수로, 인덱스를 기반으로 리스트 항목을 구성합니다.

2) ListTile 위젯 사용

ListTile 위젯의 소개

`ListTile` 위젯은 Flutter에서 리스트 항목을 구성하는 데 자주 사용되는 위젯입니다. `ListTile`은 아이콘, 제목, 부제목, 그리고 트레일링 아이콘 등을 포함할 수 있는 구조화된 UI 요소를 제공합니다. 이를 통해 리스트 항목을 시각적으로 일관성 있게 구성할 수 있습니다.

 

주요 속성:

• `leading`: 리스트 항목의 시작 부분에 배치되는 위젯 (예: 아이콘).
• `title`: 리스트 항목의 주요 텍스트를 나타내는 위젯.
• `subtitle`: 리스트 항목의 보조 텍스트를 나타내는 위젯.
• `trailing`: 리스트 항목의 끝 부분에 배치되는 위젯 (예: 아이콘 또는 버튼).
• `onTap`: 리스트 항목이 탭되었을 때 호출되는 콜백 함수.

ListTile을 사용한 항목 구성

다음은 `ListTile`을 사용하여 리스트 항목을 구성하는 예제입니다:

ListView(
  children: const <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
      subtitle: Text('Navigate using maps'),
      trailing: Icon(Icons.navigate_next),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
      subtitle: Text('View your photo albums'),
      trailing: Icon(Icons.navigate_next),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
      subtitle: Text('Make a call'),
      trailing: Icon(Icons.navigate_next),
    ),
  ],
)

위 예제는 각 항목에 아이콘, 제목, 부제목, 그리고 트레일링 아이콘을 포함한 `ListTile` 위젯을 사용하여 구성한 `ListView`입니다. 이 구성은 사용자에게 직관적이고 일관된 인터페이스를 제공합니다.

 

또한, `onTap` 속성을 사용하여 리스트 항목이 탭되었을 때의 동작을 정의할 수 있습니다. 다음은 `onTap` 속성을 추가한 예제입니다:

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
      onTap: () {
        // Handle tap event
      },
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
      onTap: () {
        // Handle tap event
      },
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
      onTap: () {
        // Handle tap event
      },
    ),
  ],
)

위 코드는 각 `ListTile`에 `onTap` 속성을 추가하여, 사용자가 항목을 탭했을 때 특정 동작을 수행하도록 설정한 예제입니다. 이를 통해 리스트 항목과의 상호작용을 손쉽게 구현할 수 있습니다.

 

이와 같은 방법으로 `ListView`와 `ListTile`을 사용하여 리스트를 생성하고 구성할 수 있으며, 이를 통해 애플리케이션의 데이터 표시와 사용자 인터페이스를 효과적으로 개선할 수 있습니다.

 

03. ListView의 다양한 생성 방법

1) ListView.builder 사용

동적 리스트 생성을 위한 ListView.builder

`ListView.builder`는 동적으로 리스트를 생성할 때 매우 유용한 위젯입니다. 이 위젯은 리스트 항목의 수가 많거나, 데이터가 런타임에 동적으로 변경되는 경우에 사용됩니다. `ListView.builder`는 `itemCount`와 `itemBuilder` 속성을 통해 각 리스트 항목을 생성합니다.

• `itemCount`: 리스트 항목의 총 개수를 지정합니다.
• `itemBuilder`: 각 리스트 항목을 생성하는 콜백 함수로, 인덱스를 기반으로 항목을 생성합니다.

예제 코드 및 설명

다음은 `ListView.builder`를 사용하여 동적으로 리스트를 생성하는 예제입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic ListView'),
        ),
        body: DynamicListView(),
      ),
    );
  }
}

class DynamicListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.list),
          title: Text('Item $index'),
        );
      },
    );
  }
}

위 코드는 100개의 항목을 동적으로 생성하여 `ListView`에 표시하는 예제입니다. `itemBuilder`는 각 항목을 생성하는 함수로, 인덱스를 기반으로 `ListTile` 위젯을 반환합니다. 이 코드는 실행할 때 다음과 같은 결과를 출력합니다:

• 각 항목은 'Item 0', 'Item 1', ..., 'Item 99'와 같은 텍스트를 가지며, 아이콘과 함께 표시됩니다.
• 리스트는 스크롤 가능하며, 모든 항목을 볼 수 있습니다.

2) ListView.separated 사용

리스트 항목 간의 구분을 위한 ListView.separated

`ListView.separated`는 리스트 항목 간에 구분선을 추가할 때 유용한 위젯입니다. 이 위젯은 `itemBuilder`, `separatorBuilder`, 그리고 `itemCount` 속성을 사용하여 각 리스트 항목과 구분선을 생성합니다.

• `itemBuilder`: 각 리스트 항목을 생성하는 콜백 함수입니다.
• `separatorBuilder`: 각 항목 사이에 배치할 구분선을 생성하는 콜백 함수입니다.
• `itemCount`: 리스트 항목의 총 개수를 지정합니다.

예제 코드 및 설명

다음은 `ListView.separated`를 사용하여 리스트 항목 간에 구분선을 추가하는 예제입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Separated ListView'),
        ),
        body: SeparatedListView(),
      ),
    );
  }
}

class SeparatedListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.list),
          title: Text('Item $index'),
        );
      },
      separatorBuilder: (context, index) {
        return Divider();
      },
    );
  }
}

위 코드는 `ListView.separated`를 사용하여 리스트 항목 간에 구분선을 추가한 예제입니다. `itemBuilder`는 각 항목을 생성하며, `separatorBuilder`는 각 항목 사이에 구분선을 생성합니다. 이 코드는 실행할 때 다음과 같은 결과를 출력합니다:

• 각 항목은 'Item 0', 'Item 1', ..., 'Item 99'와 같은 텍스트를 가지며, 아이콘과 함께 표시됩니다.
• 각 항목 사이에는 구분선(`Divider`)이 표시됩니다.
• 리스트는 스크롤 가능하며, 모든 항목과 구분선을 볼 수 있습니다.

이와 같은 방법으로 `ListView.builder`와 `ListView.separated`를 사용하여 동적으로 리스트를 생성하고, 항목 간에 구분선을 추가하여 더 깔끔하고 읽기 쉬운 리스트를 구성할 수 있습니다. 이러한 기능들은 다양한 데이터 표시 요구를 충족시키고, 사용자 경험을 향상시키는 데 매우 유용합니다.

 

04. 리스트 항목 상호작용 추가

1) onTap 속성 사용

항목 클릭 이벤트 처리

`ListTile` 위젯의 `onTap` 속성을 사용하면 리스트 항목이 클릭되었을 때 특정 동작을 수행할 수 있습니다. 이 기능은 사용자와의 상호작용을 처리하는 데 매우 유용합니다. `onTap` 속성에 콜백 함수를 지정하여, 항목이 탭되었을 때 실행할 코드를 정의할 수 있습니다.

예제 코드 및 설명

다음은 `onTap` 속성을 사용하여 리스트 항목 클릭 이벤트를 처리하는 예제입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Interactive ListView'),
        ),
        body: InteractiveListView(),
      ),
    );
  }
}

class InteractiveListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.list),
          title: Text('Item $index'),
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Item $index clicked')),
            );
          },
        );
      },
    );
  }
}

이 예제에서는 `onTap` 속성을 사용하여 리스트 항목이 클릭되었을 때 `SnackBar`를 표시합니다. `SnackBar`는 클릭된 항목의 인덱스를 표시하며, 사용자가 어떤 항목을 클릭했는지 알 수 있도록 합니다. 실행 결과는 다음과 같습니다:

• 리스트 항목을 클릭하면, 화면 하단에 `SnackBar`가 나타나 'Item X clicked'라는 메시지를 표시합니다.

2) 항목 삭제 및 수정

리스트 항목의 삭제 및 수정 방법

리스트 항목을 삭제하거나 수정하려면, 상태를 관리할 수 있는 위젯을 사용해야 합니다. `StatefulWidget`을 사용하여 리스트의 상태를 관리하고, 항목을 삭제하거나 수정할 수 있습니다. 리스트 항목을 삭제하는 방법은 특정 항목을 리스트에서 제거하고 상태를 갱신하는 것입니다. 수정하는 방법은 특정 항목의 데이터를 변경하고 상태를 갱신하는 것입니다.

예제 코드 및 설명

다음은 리스트 항목을 삭제하고 수정하는 예제입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Modifiable ListView'),
        ),
        body: ModifiableListView(),
      ),
    );
  }
}

class ModifiableListView extends StatefulWidget {
  @override
  _ModifiableListViewState createState() => _ModifiableListViewState();
}

class _ModifiableListViewState extends State {
  final List items = List.generate(20, (i) => 'Item $i');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Dismissible(
          key: Key(items[index]),
          onDismissed: (direction) {
            setState(() {
              items.removeAt(index);
            });
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Item $index dismissed')),
            );
          },
          background: Container(color: Colors.red),
          child: ListTile(
            leading: Icon(Icons.list),
            title: Text(items[index]),
            onTap: () {
              setState(() {
                items[index] = 'Clicked Item $index';
              });
            },
          ),
        );
      },
    );
  }
}

이 예제에서는 `StatefulWidget`을 사용하여 리스트 항목을 삭제하고 수정할 수 있습니다. 주요 구성 요소는 다음과 같습니다:

• Dismissible: 리스트 항목을 스와이프하여 삭제할 수 있는 위젯입니다. `key` 속성을 사용하여 각 항목을 고유하게 식별하고, `onDismissed` 콜백을 통해 항목이 삭제되었을 때의 동작을 정의합니다.
• setState(): 리스트 항목을 삭제하거나 수정한 후, 상태를 갱신하여 UI를 업데이트합니다.

리스트 항목을 삭제하려면 항목을 스와이프하고, 삭제되면 `SnackBar`가 나타나 'Item X dismissed'라는 메시지를 표시합니다. 리스트 항목을 클릭하면 해당 항목의 텍스트가 'Clicked Item X'로 변경됩니다.

 

이와 같은 방법으로 리스트 항목의 삭제 및 수정 기능을 구현할 수 있으며, 사용자와의 상호작용을 통해 더 나은 사용자 경험을 제공할 수 있습니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.28 - [Study] - 29. Flutter에서 자주 사용하는 위젯 소개 및 활용법 | Flutter

29. Flutter에서 자주 사용하는 위젯 소개 및 활용법 | Flutter

2024.07.25 - [Study] - 28. Flutter로 사용자 인터페이스 구축하기 | Flutter

28. Flutter로 사용자 인터페이스 구축하기 | Flutter

2024.07.24 - [Study] - 27. Windows에서 Flutter로 Android 앱 개발 시작하기: 단계별 가이드 | Flutter

27. Windows에서 Flutter로 Android 앱 개발 시작하기: 단계별 가이드 | Flutter

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)