Flutter List Widget Ex04

# 참고

https://flutter.io/docs/cookbook/lists/mixed-list

import 'package:flutter/material.dart';
/*
목록에서 다른 유형의 항목을 나타내려면 각 항목 유형에 대한 클래스를 정의해야 합니다.

이 예에서는 머리글이 표시된 앱에 이어 메시지가 5개 표시됩니다.
따라서 ListItem, HeadingItem 및 MessageItem의 세 가지 클래스를 만듭니다.
*/
 
// 목록에 포함할 수 있는 다양한 유형의 항목에 대한 기본 클래스
abstract class ListItem {}
 
// 제목을 표시할 데이터가 포함된 목록
class HeadingItem implements ListItem {
  final String heading;
 
  HeadingItem(this.heading);
}
 
// 메시지를 표시할 데이터가 포함된 목록
class MessageItem implements ListItem {
  final String sender;
  final String body;
 
  MessageItem(this.sender, this.body);
}
 
class ListEx04 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /*
    대부분의 경우, 인터넷이나 로컬 데이터베이스에서 데이터를 가져와 항목 목록으로 변환합니다.
    이 예에서는 사용할 항목 목록을 생성합니다.
    목록에는 헤더가 포함되어 있으며 그 다음에 5개의 메시지가 표시됩니다.
    */
    // List.generate() : List 항목을 만든다.
    final List<ListItem> items = List<ListItem>.generate(
      10,
      (i) => i % 6 == 0
          ? HeadingItem("Heading $i")
          : MessageItem("Sender $i", "Message body $i"),
    );
 
    print('$items');
 
    return Scaffold(
      appBar: AppBar(
        title: Text('ListEx04'),
      ),
      body: SafeArea(
        /*
        각 항목을 위젯으로 변환하기 위해 ListView.builder 생성자를 사용합니다.

        일반적으로, 우리는 우리가 다루고 있는 항목의 유형을 확인하고
        해당 유형의 위젯을 반환하는 builder 기능을 제공하고자 합니다.

        이 예에서는 is 키워드 를 사용하여 처리 중인 항목의 유형을 확인하는 것이 편리합니다.
        속도가 빠르며 각 항목을 해당 유형에 자동으로 캐스팅합니다.
        하지만 여러분이 다른 패턴을 선호한다면 이 문제에 접근하는 다른 방법이 있습니다!

        항목 수가 많은 목록을 사용하려면 ListView.builder 생성자를 사용하는 것이 가장 좋습니다.
        기본 ListView 생성자는 모든 항목을 한 번에 생성하도록 요구하는 반면,
        ListView.builder 생성자는 화면에 스크롤될 때 항목을 생성합니다.
        */
        child: ListView.builder(
          // ListView에서 구축해야 하는 항목 수 확인
          itemCount: items.length,
          // builder 함수를 제공합니다. 여기가 마법이 일어나는 곳이야! 일 것이다
          // 각 항목을 항목 유형에 따라 위젯으로 변환합니다.
          itemBuilder: (context, index) {
            final item = items[index];
 
            // item 이 HeadingItem 이라면
            if (item is HeadingItem) {
              return ListTile(
                title: Text(
                  item.heading,
                  style: Theme.of(context).textTheme.headline,
                ),
              );
            }
            // item 이 MessageItem 이라면
            else if (item is MessageItem) {
              return ListTile(
                title: Text(item.sender),
                subtitle: Text(item.body),
              );
            }
          },
        ),
      ),
    );
  }
}