Giter VIP home page Giter VIP logo

multi_type_list_view's Introduction

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

multi_type_list_view's People

Contributors

luckybilly avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.