I have a Flutter website built on channel beta that is used for uploading large images. When testing on Chrome, scrolling down when there are large number of image rows it is extremely laggy.
Below is a sample reproduction of the code
import 'package:flutter/material.dart';
import 'package:flutter_dropzone/flutter_dropzone.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
DropzoneViewController controller1;
String message1 = 'Drop something here';
bool highlighted1 = false;
List assets = [];
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Dropzone example'),
),
body: ListView(
children: [
if (assets.length > 0)
_showAssets(assets)
else
buildZone1(context),
Padding(
padding: const EdgeInsets.all(30),
child: Container(
width: 100,
child: MaterialButton(
color: Colors.greenAccent,
child: Text('Browse files'),
onPressed: () =>
controller1.pickFiles(multiple: true).then((files) {
files.forEach((file) {
controller1.createFileUrl(file).then((url) {
setState(() {
print('in set state');
assets.add(url);
});
});
});
}),
),
),
),
Container(height: 400, color: Colors.lightGreen),
Container(height: 400, color: Colors.redAccent),
],
),
),
);
Widget _showAssets(List assets) {
//print(assets);
return Wrap(
children: assets.map((asset) {
return Container(
height: 150,
child: Image.network(asset),
);
}).toList(),
);
}
Widget buildZone1(BuildContext context) => Builder(
builder: (context) => Container(
height: 200,
child: DropzoneView(
operation: DragOperation.copy,
cursor: CursorType.grab,
onCreated: (ctrl) => controller1 = ctrl,
onLoaded: () => print('Zone 1 loaded'),
onError: (ev) => print('Zone 1 error: $ev'),
onHover: () {
setState(() => highlighted1 = true);
//print('Zone 1 hovered');
},
onLeave: () {
setState(() => highlighted1 = false);
//print('Zone 1 left');
},
onDrop: (ev) {
print('Zone 1 drop: ${ev.name}');
setState(() {
print('in set state');
message1 = '${ev.name} dropped';
highlighted1 = false;
});
},
),
),
);
}
pubspec.yaml
name: file_upload
description: A new Flutter project.
publish_to: 'none'
https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_dropzone: ^1.0.9
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.1
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
To reproduce
You're not lazily building the pictures. Use ListView.builder
instead.
The documentation states in regard to the default ListView
constructor:
This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.
With 50 to 100 2MB images, it would be understandable that your computer is having a hard time.
The documentation states that the ListView.builder
constructor builds children on demand.
The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
Ex.
ListView.builder(
itemBuilder: (context, index) {
if (assets.length > 0) {
if (assets[index] == null) {
return null;
}
return Container(
height: 150,
child: Image.network(assets[index]),
);
}
else {
if(index > 0) {
return null;
}
return buildZone1(context);
}
},
)