Wrap.builder like in ListView.builder - flutter

Question

I want to use Wrap on large amount of objects.
I tried to just map all object to children but it cause serious performance issue.
I want some alternative way to build only currently displayed widgets but with style of Wrap.
Some code:
Wrap(
children: list.map(createCardFromData), // List contains 20'000 items
);

Answer 1

This is really good example flutter is missing in my opinion.
This is also something which is being discussed on Flutter's repo
https://github.com/flutter/flutter/issues/97544
Unfortunately, it will take some time for it to be in stable release. For the time being, I would suggest to paginate the data into chunks of maybe 100 items. There are other ways as well which might involve a lot of calculations. Meanwhile, I (or maybe some other person) could try to come up with a efficient solution and maybe contribute to the Flutter.
After some fiddling, I could build sample app per your requirement.
pubspec.yaml
name: scrollable_wrap
description: A new Flutter project.
publish_to: "none"
version: 1.0.0+1
environment:
sdk: ">=2.18.4 <3.0.0"
dependencies:
cupertino_icons: ^1.0.2
flutter:
sdk: flutter
flutter_svg: ^1.1.6
random_avatar: ^0.0.7
random_words: ^1.0.2
dynamic_layouts:
git:
url: git#github.com:flutter/packages.git
path: packages/dynamic_layouts
dev_dependencies:
flutter_lints: ^2.0.0
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
main.dart
import 'package:dynamic_layouts/dynamic_layouts.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:random_avatar/random_avatar.dart';
import 'package:random_words/random_words.dart';
class Item {
final String label;
final String avatar;
Item(this.label) : avatar = randomAvatarString(label);
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scrollable Wrap',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Item> data = [];
int n = 100000;
void init() async {
data = generateNoun().take(n).map((e) => Item(e.asString)).toList();
setState(() {});
}
#override
void initState() {
super.initState();
init();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Scrollable Wrap'),
),
body: CustomScrollView(slivers: [
DynamicSliverGrid(
gridDelegate: const SliverGridDelegateWithWrapping(
mainAxisSpacing: 0,
crossAxisSpacing: 0,
childCrossAxisExtent: double.infinity,
childMainAxisExtent: double.infinity,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
if (kDebugMode) {
print('build called for $index');
}
final item = data[index];
return Chip(
key: ValueKey(item),
label: Text('$index ${item.label}'),
avatar: SvgPicture.string(item.avatar),
);
},
childCount: data.length,
),
),
]),
);
}
}
Output
Please use flutter run --no-sound-null-safety as one of the library is not null-safe. Also, you might find lag as lots of svgs are being processed on scroll. It might not happen in production.

Answer 2

Do you need this many items loaded at once? You're probably using a scroll view anyway, so the user only initially sees a small batch of items rather than all of them, until they actually scroll for more. What you're looking for is lazy loading, maybe combined with a technique like infinite scroll.
Try a ListView (specifically, ListView.builder) where each item contains a Wrap widget (say, each 10 items - but you may want to experiment with this number until you see a balance between performance and visual appeal).
Or, alternatively, you may code your own Wrap that does loading lazily and reuses its views, so that it only loads and displays a couple of its children as needed, not thousands at once.

Answer 3

If your items are fixed width you could try something like this:
import 'dart:math';
import 'package:flutter/cupertino.dart';
typedef ValueWidgetBuilder<T> = Widget Function(T value);
class WrapBuilder extends StatelessWidget {
final double itemWidth;
final List items;
final ValueWidgetBuilder itemBuilder;
const WrapBuilder(
{Key? key,
required this.itemWidth,
required this.items,
required this.itemBuilder})
: super(key: key);
#override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
var cardsPerRow = max(1, constraints.maxWidth ~/ itemWidth);
return ListView.builder(
shrinkWrap: true,
controller: ScrollController(),
itemCount: (items.length / cardsPerRow).ceil(),
itemBuilder: (BuildContext context, int index) {
var rowItems = items.sublist(cardsPerRow * index,
min(cardsPerRow * (index + 1), items.length));
return Row(children: [
for (final item in rowItems)
SizedBox(
width: itemWidth,
child: itemBuilder(item))
]);
},
);
});
}
}
And then use like
WrapBuilder(
itemWidth: 100, //example
items: list,
itemBuilder: createCardFromData);