1. create a MultiTypeListView and initial with settings
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar:AppBar(
title:constText('MultiTypeListView Demo'),
),
body:MultiTypeListView(
items: items, // [required]. items in multiple types to show
widgetBuilders: [ //[required]. your builders for each type of itemsTitleItemBuilder(),
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 widgetreturnContainer(
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:
Item type
Builder
String
TitleItemBuilder
List<BannerItem>
BannerBuilder
Message
MessageBuilder
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 ]classTitleItemBuilderextendsMultiTypeWidgetBuilder<String> {
@overrideWidgetbuildWidget(BuildContext context, String item, int index) {
returnContainer(
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> ]classBannerBuilderextendsMultiTypeWidgetBuilder<List<BannerItem>> {
finalOnItemTap<BannerItem> onItemTap;
BannerBuilder(this.onItemTap);
@overrideWidgetbuildWidget(BuildContext context, List<BannerItem> item, int index) {
returnContainer(
height:300,
child:Swiper(
//...
itemBuilder: (context, index) {
returnContainer(
child:InkWell(
onTap: (){
onItemTap(context, item[index], index);
},
child:Container(
//...
),
),
);
},
),
);
}
}
typedefOnItemTap<T> =voidFunction(BuildContext context, T item, int index);
/// create a message widget for item of type [ Message ]classMessageBuilderextendsMultiTypeWidgetBuilder<Message> {
finalOnItemTap<Message> onItemTap;
MessageBuilder(this.onItemTap);
@overrideWidgetbuildWidget(BuildContext context, Message item, int index) {
returnContainer(
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),
),
);
}
}