Flutter Example - ListView | ListView with diffrent types of items

import 'package:flutter/material.dart';

abstract class ListsItem {}

class HeadingItem implements ListsItem {
  final String heading;

  HeadingItem(this.heading);
}

class MessageItem implements ListsItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);
}

class ListViewWithDiffTypeItems extends StatelessWidget {
  List<ListsItem> items;

  ListViewWithDiffTypeItems() {
    items = List<ListsItem>.generate(100, (index) {
      if (index % 5 == 0) {
        return HeadingItem("HeadingItem $index");
      } else {
        return MessageItem("Sender $index", "Message body $index");
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ListView with diffrent types of itmes")),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          if (item is HeadingItem) {
            return ListTile(
              title: Text(item.heading,style: TextStyle(fontWeight: FontWeight.bold),),
            );
          } else if (item is MessageItem) {
            return Padding(
              padding: const EdgeInsets.only(left: 10),
              child: ListTile(
                title: Text(item.sender),
                subtitle: Text(item.body),
              ),
            );
          }
          return null;
        },
      ),
    );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동

---

※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

Flutter Code Examples - Google Play 앱