ListView.generate, Dismisible 위젯에서의 Collection for

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tiktok_clone/constants/gaps.dart';
import 'package:tiktok_clone/constants/sizes.dart';

class ActivityScreen extends StatefulWidget {
  const ActivityScreen({super.key});

  @override
  State<ActivityScreen> createState() => _ActivityScreenState();
}

class _ActivityScreenState extends State<ActivityScreen> {
  final List<String> _notifications = List.generate(20, (index) => "${index}h");

  void _onDismissed(String notification) {
    _notifications.remove(notification);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    print(_notifications);
    return Scaffold(
      appBar: AppBar(
        title: const Text("All activity"),
      ),
      body: ListView(
        children: [
          Gaps.v14,
          Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: Sizes.size12,
            ),
            child: Text(
              'New',
              style: TextStyle(
                fontSize: Sizes.size14,
                color: Colors.grey.shade500,
              ),
            ),
          ),
          Gaps.v14,
          for (var notification in _notifications)
            Dismissible(
              key: Key(notification),
              onDismissed: (direction) => _onDismissed(notification),
              background: Container(
                alignment: Alignment.centerLeft,
                color: Colors.green,
                child: const Padding(
                  padding: EdgeInsets.only(
                    left: Sizes.size10,
                  ),
                  child: FaIcon(
                    FontAwesomeIcons.checkDouble,
                    color: Colors.white,
                    size: Sizes.size24,
                  ),
                ),
              ),
              secondaryBackground: Container(
                alignment: Alignment.centerRight,
                color: Colors.red,
                child: const Padding(
                  padding: EdgeInsets.only(
                    right: Sizes.size10,
                  ),
                  child: FaIcon(
                    FontAwesomeIcons.trashCan,
                    color: Colors.white,
                    size: Sizes.size24,
                  ),
                ),
              ),
              child: ListTile(
                minVerticalPadding: Sizes.size16,
                leading: Container(
                  width: Sizes.size52,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    border: Border.all(
                      color: Colors.grey.shade400,
                      width: Sizes.size1,
                    ),
                  ),
                  child: const Center(
                    child: FaIcon(
                      FontAwesomeIcons.bell,
                      color: Colors.black,
                    ),
                  ),
                ),
                title: RichText(
                  text: TextSpan(
                    text: "Account updates:",
                    style: const TextStyle(
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                      fontSize: Sizes.size16,
                    ),
                    children: [
                      const TextSpan(
                        text: " Upload longer videos",
                        style: TextStyle(
                          fontWeight: FontWeight.normal,
                        ),
                      ),
                      TextSpan(
                        text: " $notification",
                        style: TextStyle(
                          fontWeight: FontWeight.normal,
                          color: Colors.grey.shade500,
                        ),
                      ),
                    ],
                  ),
                ),
                trailing: const FaIcon(
                  FontAwesomeIcons.chevronRight,
                  size: Sizes.size16,
                ),
              ),
            )
        ],
      ),
    );
  }
}

이 코드는 Flutter에서 ListView를 사용하여 알림 목록을 동적으로 생성하고 관리하는 방법을 보여줍니다. 특히, "collection for" 문을 사용하여 _notifications 리스트에 있는 각 알림에 대해 Dismissible 위젯을 생성합니다. 이를 통해 각 알림을 스와이프하여 삭제할 수 있는 UI를 구현합니다.

주요 로직 및 구성요소:

1. _notifications 리스트:

   • _notifications는 문자열 리스트로, 여기서는 0시간부터 19시간까지의 문자열("0h", "1h", ..., "19h")을 생성하여 초기화합니다. 이는 각각의 알림을 대표합니다.

2. _onDismissed 메서드:

   • _onDismissed는 사용자가 알림을 스와이프하여 삭제할 때 호출되는 메서드입니다. 이 메서드는 삭제된 알림을 _notifications 리스트에서 제거하고, setState()를 호출하여 UI를 업데이트합니다.

3. ListView와 Collection For 문:

   • ListView 위젯은 스크롤 가능한 알림 목록을 표시합니다.
   • "collection for" 문(for (var notification in _notifications))을 사용하여 _notifications 리스트의 각 항목에 대해 Dismissible 위젯을 동적으로 생성합니다. 이 구문은 리스트의 각 항목을 순회하며, 해당 항목을 기반으로 위젯을 구성합니다.

4. Dismissible 위젯:

   • Dismissible 위젯은 사용자가 알림을 좌우로 스와이프할 때 알림을 삭제할 수 있게 합니다.
   • key 속성에는 각 알림을 유일하게 식별할 수 있는 Key 객체를 전달합니다.
   • background와 secondaryBackground는 알림을 각각 왼쪽과 오른쪽으로 스와이프했을 때 보여지는 배경을 정의합니다.
   • onDismissed 콜백에는 _onDismissed 메서드를 연결하여, 알림이 삭제될 때 해당 알림을 처리합니다.

5. ListTile 위젯:

   • 각 Dismissible의 자식으로 ListTile 위젯을 사용하여 알림의 내용을 표시합니다.
   • ListTile에는 알림 아이콘, 알림 제목, 상세 텍스트, 우측 화살표 아이콘이 포함됩니다.
   • title에는 RichText 위젯을 사용하여 복잡한 스타일의 텍스트를 표시합니다.

결론:

이 코드는 Flutter에서 사용자의 액션(여기서는 스와이프)에 반응하여 동적으로 UI를 변경하는 방법을 보여줍니다. "collection for" 문을 사용하여 _notifications 리스트의 각 항목에 대한 UI를 생성하고, Dismissible 위젯을 통해 각 항목을 스와이프하여 삭제하는 인터랙티브한 경험을 제공합니다. 이러한 접근 방식은 목록 관리, 이메일 앱, 소셜 미디어 앱 등 다양한 애플리케이션에서 유용하게 사용될 수 있습니다.