multi_type_list_view 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • new72

MultiTypeListView #

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

Screenshot #

homechat

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 typeBuilder
StringTitleItemBuilder
List<BannerItem>BannerBuilder
MessageMessageBuilder
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 #

CodeScreenshot

0.1.0 #

  • Initial release.

example/README.md

multi_type_list_view_example #

Demonstrates how to use the multi_type_list_view plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  multi_type_list_view: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:multi_type_list_view/multi_type_list_view.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
44
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
72
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/multi_type_list_view.dart.

Run flutter format to format lib/multi_type_list_view.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test