A flutter customer ListView that displays multiple widget types

multitype listview

a light weight flutter customer listview that displays multiple widget types.

screenshot

home	chat

getting started

dependencies:
  multi_type_list_view: ^0.1.0

usage

import 'package:multi_type_list_view/multi_type_list_view.dart';

1. create a multitypelistview and initial with settings

@override
widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: const text('multitypelistview demo'),
      ),
      body: multitypelistview(
        items: items, // [required]. items in multiple types to show
        widgetbuilders: [ //[required]. your builders for each type of items
          titleitembuilder(),
          bannerbuilder(),
          messagebuilder(),
          // other builders...
        ],
        // if there is no builder in [widgetbuilders] that can create widgets for a item, then that item is an unsupported item
        //  the unsupported items could be handled by [widgetbuilderforunsupporteditemtype], 
        //      create an widget for each of them, for example: create an widget to show upgrade app version info
        //  if [widgetbuilderforunsupporteditemtype] is null, the unsupported items will be skipped
        widgetbuilderforunsupporteditemtype: upgradeappversionbuilder(),
        //when [showdebugplaceholder] set as true(default:false), 
        //  if the building result widget for an item is null, a debug widget will be shown
        showdebugplaceholder: true,
         //widgetwrapper will wrap all widget build from builders for all items(except widget is null)
        widgetwrapper: (widget, item, index) {
          //for example: add a bottom border for each item widget
          return container(
            decoration: boxdecoration(
              border: border(bottom: borderside(color: colors.grey[200], width: 0.5),),
            ),
            child: widget,
          );
        },
        // all parameters of the listview.builder are supported except [ itembuilder ]
        controller: controller,
      ),
    );
}

2. create multitypewidgetbuilder(s) for each type of items

for example: create 3 builders to match 3 item types for the demo home page:

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

/// create a group title for item of type [ string ]
class titleitembuilder extends multitypewidgetbuilder<string> {
  @override
  widget buildwidget(buildcontext context, string item, int index) {
    return container(
      padding: edgeinsets.all(top: 20, left: 20, bottom: 5),
      child: text(item, style: textstyle(fontsize: 20, color: colors.lightblue),),
    );
  }
}

/// create a banner for item of type [ list<banneritem> ] 
class bannerbuilder extends multitypewidgetbuilder<list<banneritem>> {
  final onitemtap<banneritem> onitemtap;

  bannerbuilder(this.onitemtap);

  @override
  widget buildwidget(buildcontext context, list<banneritem> item, int index) {
    return container(
      height: 300,
      child: swiper(
        //...
        itembuilder: (context, index) {
          return container(
            child: inkwell(
              ontap: (){
                onitemtap(context, item[index], index);
              },
              child: container(
                //...
              ),
            ),
          );
        },
      ),
    );
  }
}

typedef onitemtap<t> = void function(buildcontext context, t item, int index);


/// create a message widget for item of type [ message ] 
class messagebuilder extends multitypewidgetbuilder<message> {

  final onitemtap<message> onitemtap;

  messagebuilder(this.onitemtap);

  @override
  widget buildwidget(buildcontext context, message item, int index) {
    return container(
      child: listtile(
        ontap: () {
          onitemtap(context, item, index);
        },
        leading: cliprrect(
            borderradius: borderradius.circular(5),
            child: image.asset(item.avatar, fit: boxfit.cover, width: 60, height: 60,),
        ),
        title: text(item.title),
        subtitle: text(item.subtitle),
      ),
    );
  }
}

advance usage

code	screenshot