flutter_multitype

Description:

flutter multitype

Flutter Multitype #






About Flutter Multitype
Installing
Function
Usage
Advanced usage

One to many
Register unsupported data of item widget


Easy to debug
Screenshots

Chat Sample
Media Sample
Blog Sample


Thanks
关于作者

About Flutter Multitype #
🔥🔥🔥Easier and more flexible to create multiple types for Flutter ListView.
Installing #
Add solution to your pubspec.yaml file:
dependencies:
flutter_multitype: ^0.9.0
copied to clipboard
Import get in files that it will be used:
import 'package:flutter_multitype/multitype.dart';
copied to clipboard
Function #
flutter_multitype can be used to decouple and improve readability when items in a ListView have
different types of layouts and are dynamically indeterminate .
Usage #
one data bind one widget
Step 1. Create a data class, for example: #
class CategoryName {
String? title;

CategoryName(this.title);
}

class CategorySubContent {
String? title;
String? url;

CategorySubContent(this.title, this.url);
}
copied to clipboard
Step 2. Create a class extends ItemViewBinder
class CategoryViewBinder extends ItemViewBinder<CategoryName> {
@override
Widget buildWidget(BuildContext context, CategoryName item, int index) {
return const Text("Category");
}
}

class ContentViewBinder extends ItemViewBinder<List<CategorySubContent>> {
@override
Widget buildWidget(BuildContext context, List<CategorySubContent> item, int index) {
return const Text("Content");
}
}
copied to clipboard
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.register(CategoryViewBinder());
adapter.register(ContentViewBinder());
adapter.setDebugViewBinderEnable(isEnable: true);
});

@override
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]);
},
),
);
}
}
copied to clipboard
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();
}
default:
{
return UnknownMeViewBinder();
}
}
} else {
switch (message.type) {
case 1:
{
return TextOtherViewBinder();
}
default:
{
return UnknownOtherViewBinder();
}
}
}
});
copied to clipboard
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)
copied to clipboard
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})
copied to clipboard
Screenshots #
Chat Sample #

Media Sample #

Blog Sample #

Thanks #
MultiType
关于作者 #
GitHub  : Wenlong-Guo
Email     : [email protected]
WeChat : xiaoguo9745