Multi type list view - A flutter customer ListView that displays multiple widget types.

Overview

MultiTypeListView

A light weight flutter customer ListView that displays multiple widget types.

Pub

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:

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 ]
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
You might also like...

Here is an application project that displays a list of products from the Elevenia API called STORE.

Here is an application project that displays a list of products from the Elevenia API called STORE.

Here is an application project that displays a list of products from the Elevenia API called STORE.

May 18, 2022

🔥 Simple application using ListView with YummiAPI for list Food 🍲

demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

Jan 5, 2022

A ListView that allows you to group list items and support headers like iOS UITableView section.

A ListView that allows you to group list items and support headers like iOS UITableView section.

GroupListView package for Flutter. A ListView that allows you to group list items and support headers like iOS UITableView section. Features List Item

Nov 21, 2022

A loading more list which supports ListView,GridView,WaterfallFlow and Slivers.

loading_more_list A loading more list which supports ListView,GridView,WaterfallFlow and Slivers. Language: English | 中文简体 Web demo for LoadingMoreLis

Dec 19, 2022

A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type

Starlight Type Ahead FLUTTER | ANDROID, IOS, LINUX, MACOS, WEB, WINDOWS A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions

Dec 15, 2021

Grid-View-App - Grid View App For Flutter

Grid-View-App - Grid View App For Flutter

grid_view_app practice purpose flutter application Getting Started This project

Jun 9, 2022

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

mvvm_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

A Flutter widget that checks and displays the version status of application and you can easily guide user to update your app

A Flutter widget that checks and displays the version status of application and you can easily guide user to update your app

A most easily usable Flutter widget about application version check! 1. About 1.

Dec 16, 2021
Owner
齐翊(学义)
齐翊(学义)
Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

null 24 Dec 15, 2022
Ali Türkay AVCI 1 Jan 20, 2022
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Ashok Kumar Verma 0 Nov 30, 2021
The LoginRadius Flutter SDK will let you integrate LoginRadius' customer identity platform with your Flutter application(s).

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Ahmed Yusuf 4 Feb 3, 2022
The prime objective of this app is to store the real time information of the user using firebase cloud firestore and also can delete, remove and update the customer information

crud_firestore A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Muhammad Zakariya 0 Mar 15, 2022
Flutter Bidirectional ListView - ListView with items that can be scrolled in both directions with a fixed item count and scroll boundaries.

Flutter Bidirectional ListView ListView with items that can be scrolled and lazy loaded in up and down direction with a fixed item count and scroll bo

Christoph Rothermel 7 May 30, 2022
A ListView widget capable of pinning a child to the top of the list.

PinnableListView A Flutter ListView widget that allows pinning a ListView child to the top of the list. Demo Getting Started Define the list PinCont

Jan Hrastnik 2 May 17, 2020
This is my way to build a Tagged Search Field that display a list with suggestions while the user type.

tagged_search_field This is my way to build a Tagged Search Field that display a list with suggestions while the user type. A regular search field at

Sherly Cabrera Sánchez 0 Nov 5, 2021
Multi-Camera-Dashboard - Flutter App to View RTSP Streams

9.9.2021 update I have updated the firebase db to be read only due to abuse. The save operation works if you import your own firebase and modify proje

Mitch Ross 54 Jan 1, 2023
Api Call Check flutter - A new Flutter project that demonstrates api calling and displays them in a scrollable list

api_fetch A new Flutter project that demonstrates api calling and displays them

Babish Shrestha 0 Jan 2, 2022