Flutter Multitype

License Release likes popularity pub points

About Flutter Multitype

:fire::fire::fire:Easier and more flexible to create multiple types for Flutter ListView.


Add solution to your pubspec.yaml file:

  flutter_multitype: ^0.9.0

Import get in files that it will be used:

import 'package:flutter_multitype/multitype.dart';


flutter_multitype can be used to decouple and improve readability when items in a ListView have different types of layouts and are dynamically indeterminate .


one data bind one widget

Step 1. Create a data class, for example:

class CategoryName {
  String? title;


class CategorySubContent {
  String? title;
  String? url;

  CategorySubContent(this.title, this.url);

Step 2. Create a class extends ItemViewBinder

class CategoryViewBinder extends ItemViewBinder<CategoryName> {
  Widget buildWidget(BuildContext context, CategoryName item, int index) {
    return const Text("Category");

class ContentViewBinder extends ItemViewBinder<List<CategorySubContent>> {
  Widget buildWidget(BuildContext context, List<CategorySubContent> item, int index) {
    return const Text("Content");

Step 3. register your types and setup your ListView, for example:

class _MediaPageState extends State<MediaPage> {
  List<dynamic> items = Data.getMediaData();
  MultiTypeAdapter adapter = MultiTypeAdapter.newInstance((adapter) {
    adapter.setDebugViewBinderEnable(isEnable: true);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Media Page"),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return adapter.getItemBuilder(context, index, items[index]);

Multi type item widget ListView is complete

Advanced usage

One to many

one data bind many widget,for example:

/// ChatMessage will be bind TextMeViewBinder、TextOtherViewBinder、UnknownMeViewBinder、UnknownOtherViewBinder four Widget
MultiTypeAdapter adapter = MultiTypeAdapter.newInstance((adapter) {
adapter.registerOneToMany<ChatMessage>((position, item) {
  var message = item as ChatMessage;
  if (message.isMe == true) {
    switch (message.type) {
      case 0:
          return TextMeViewBinder();
          return UnknownMeViewBinder();
  } else {
    switch (message.type) {
      case 1:
          return TextOtherViewBinder();
          return UnknownOtherViewBinder();

Register unsupported data of item widget

If someone items data have not register, it will be bind unsupportedViewBinder. For example: Old version received new version data, you can show this unsupportedViewBinder for tips user update app. But if your data is same type,this function is not suitable.You can use in different type data.

void registerUnsupportedViewBinder(ItemViewBinder unsupportedViewBinder)

Easy to debug

If someone items data have not register, it will be bind debugViewBinder if someone items data have not register,at the same time register unsupportedViewBinder and debugViewBinder, debugViewBinder will be cover unsupportedViewBinder. Don't worry,debugViewBinder is never show in release,it just show in !bool.fromEnvironment("dart.vm.product") .

void setDebugViewBinderEnable({bool isEnable = !inProduction, ItemViewBinder? debugViewBinder})


Chat Sample

Media Sample

Blog Sample




GitHub  : Wenlong-Guo
Email     : guowenlong20000@sina.com
WeChat : xiaoguo9745


  • Description: 入口
  • Author: 郭文龙
  • Date: 2022/6/28 11:02
  • Email: guowenlong20000@sina.com
  • multitype/default_debug_view_binder