[flutter] Scaffold에서 ListView에 아이템을 추가하고 삭제하는 방법은 어떻게 되나요?

12 Dec 2023

flutter

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  List<String> items = ['아이템 1', '아이템 2', '아이템 3'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('리스트뷰 예제'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              items.add('새로운 아이템');
            });
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위의 예시에서는 FloatingActionButton을 사용하여 아이템을 추가합니다.

ListView에서 아이템 삭제하기

ListView에서 아이템을 삭제하는 방법은 간단합니다. ListView.builder 대신 ListView를 사용하고, ListTile 위젯의 onLongPress 속성을 사용하여 아이템을 삭제할 수 있습니다. 아래는 예시 코드입니다.

//... (이전 코드 부분 생략)

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('리스트뷰 예제'),
    ),
    body: ListView(
      children: <Widget>[
        for (int i = 0; i < items.length; i++)
          ListTile(
            title: Text(items[i]),
            onLongPress: () {
              setState(() {
                items.removeAt(i);
              });
            },
          )
      ],
    ),
  ),
);

위의 예시에서는 onLongPress 이벤트를 사용하여 아이템을 삭제합니다.

이제 위의 예시를 참고하여 ListView에 아이템을 추가하고 삭제하는 방법을 쉽게 구현해 보실 수 있을 것입니다. 부가적으로 필요한 내용이 있으시면 언제든지 물어봐 주세요.

목차

ListView에 아이템 추가하기

ListView에서 아이템 삭제하기