Flutter-ListView, Dismissible

위 사진처럼 listview를 만들고 listview 아이템들을 옆으로 스와이프 해서 삭제하는 걸 만들어 보겠습니다.

import 'package:flutter/material.dart';

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  final items = List<String>.generate(20, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('listview'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item=items[index];
          return Dismissible(
            background: Container(color: Colors.red,),
            direction: DismissDirection.startToEnd,//왼쪽에서 오른쪽오 스와이프
            onDismissed: (direction){//값을 완전히 삭제
              setState(() {
                if(direction== DismissDirection.startToEnd){
                  items.removeAt(index);
                }
              });
            },
            child: ListTile(
              title: Text('${items[index]}'),
            ),
            key: Key(item),
          );
        },
      ),
    );
  }
}

 

final items = List <String>. generate(20, (i) => "Item ${i + 1}");

리스트뷰를 선언하고 generate에 20은 아이템의 갯수, (i) => "Item ${i + 1}"는 람다식으로 Item1 2 3 으로 숫자를 늘려가며 아이템 이름을 선언해주는 것입니다.

 

ListTile

리스트뷰의 아이템들을 말한다

 

Dismissible

background : 스와이프 할 때 보이는 화면 설정

direction : 스와이프를 어느 방향으로 할지 결정

onDismissed : 값을 완전히 삭제시키는 것 setState를 넣어서 설정한다.