ListView Header

If You want to create lists that display different types of content. For example, you might be working on a list that display a header followed by a sub items related to the header, followed by another header.

Convert the data source into widgets

ListView.builder(
  // Let the ListView know how many items it needs to build.
  itemCount: items.length,
  // Provide a builder function. This is where the magic happens.
  // Convert each item into a widget based on the type of item it is.
  itemBuilder: (context, index) {
    final item = items[index];

    if (item is HeadingItem) {
      return ListTile(
        title: Text(
          item.heading,
          style: Theme.of(context).textTheme.headline,
        ),
      );
    } else if (item is MessageItem) {
      return ListTile(
        title: Text(item.sender),
        subtitle: Text(item.body),
      );
    }
  },
);

main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<ListItem>.generate(
      100,
          (i) => i % 4 == 0
          ? HeadingItem("Heading $i")
          : MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

class MyApp extends StatelessWidget {
  final List<ListItem> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Header List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          // Let the ListView know how many items it needs to build.
          itemCount: items.length,
          // Provide a builder function. This is where the magic happens.
          // Convert each item into a widget based on the type of item it is.
          itemBuilder: (context, index) {
            final item = items[index];

            if (item is HeadingItem) {
              return ListTile(
                title: Text(
                  item.heading,
                  style: Theme.of(context).textTheme.headline,
                ),
              );
            } else if (item is MessageItem) {
              return ListTile(
                title: Text(item.sender),
                subtitle: Text(item.body),
              );
            }
          },
        ),
      ),
    );
  }
}

// The base class for the different types of items the list can contain.
abstract class ListItem {}

// A ListItem that contains data to display a heading.
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);
}

// A ListItem that contains data to display a message.
class MessageItem implements ListItem {
  final String sender;
  final String body;

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

You can Download Source Code via Github.

16 Replies to “ListView Header”

  1. Nice post. I was checking constantly this blog and I am impressed!
    Extremely useful information specially the last section 🙂 I
    take care of such information much. I was looking for this
    particular information for a very long time. Thanks and best of luck.

  2. Every weekend i used to visit this site, for the reason that
    i wish for enjoyment, since this this web site conations in fact fastidious funny data
    too.

  3. I am not sure where you are getting your info, but great topic.
    I needs to spend some time learning much more or understanding more.
    Thanks for fantastic information I was looking for this information for
    my mission.

  4. Pretty nice post. I just stumbled upon your weblog and wanted to say
    that I’ve truly enjoyed surfing around your blog posts.
    In any case I will be subscribing to your rss feed and I hope you
    write again soon!

  5. I think the admin of this web site is actually working hard in support of
    his web site, as here every information is quality based material.

  6. I appreciate, cause I discovered exactly what I used to be
    looking for. You have ended my four day lengthy hunt!

    God Bless you man. Have a nice day. Bye

  7. Superb post however , I was wondering if you could write a litte
    more on this topic? I’d be very thankful if you
    could elaborate a little bit further. Thanks!

Leave a Reply

Your email address will not be published.