I am relatively new to flutter and am experiencing a problem now I couldn't find any solution to online.
I am building a GridView of Products each with 3 Buttons/GestureDetectors some Text and a NetworkImage.
The code below shows a simplified version of that FutureBuilder.
The problem is that as soon as there are more than 300 GridView items, scrolling gets really choppy and jittery and in my use case, there are about 500 products which makes scrolling basically impossible. When I remove the GestureDetectors/Buttons from the GridView items scrolling works more or less fine and with 20 items it also works fine even with the buttons, if I substitute the onPressed function with a print it also works fine. Also on Android, it is not as bad as on IOS. I tested everything on an iPhone XS Max with IOS 15.2.1 I tried in release mode, I even built the app and installed it with Xcode but it does not get better. I tried that with the master channel as well as the stable channel of flutter.
On the web it works all fine.
Here is a video on iPhone XS Max in release mode (original application, but the performance is the same as the minimal reproduction code): https://drive.google.com/file/d/1NX04z8O332t0tPvxc4wOCOXcIGtpzEVl/view?usp=sharing
I really don't know what to do since the GridView.builder should only load what is in or near the ViewPort, but as I said the higher the ItemCount, the worse the performance...
Also, the framerate seems to stay constant, the choppiness therefore is probably not a performance issue?
Minimal reproduction code:
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
List shoppingCartList = [];
Future<List> getFuture(int number) async {
List list = [];
for (int i = 0; i < number; i++) {
list.add(i);
}
return list;
}
iconButtonFunction(snapshot, index) async {
final SharedPreferences prefs = await _prefs;
HapticFeedback.heavyImpact();
setState(() {
shoppingCartList.add([
snapshot.data[index],
snapshot.data[index],
snapshot.data[index],
snapshot.data[index],
snapshot.data[index],
snapshot.data[index]
]);
});
await prefs.setString('currentShoppingCart', jsonEncode(shoppingCartList));
//updateProductList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
children: [
FutureBuilder(
future: getFuture(500),
builder: (context, AsyncSnapshot snapshot) {
return GridView.builder(
primary: false,
shrinkWrap: true,
itemCount: snapshot.data?.length ?? 0,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(10),
color: Colors.green,
child: Column(
children: [
Row(
children: [
IconButton(
onPressed: () {
iconButtonFunction(snapshot, index);
},
icon: Icon(Icons.add),
),
],
),
GestureDetector(
onTap: () {
print('gesture detected');
},
child: Column(
children: [
Text(snapshot.data[index].toString()),
],
),
)
],
),
);
},
);
},
),
],
),
);
}
}
The flutter doctor -v output:
[✓] Flutter (Channel master, 2.10.0-1.0.pre.341, on macOS 12.1 21C52 darwin-x64, locale de-DE)
• Flutter version 2.10.0-1.0.pre.341 at /Users/maxdeboer/Dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 3a20b2c323 (vor 16 Stunden), 2022-01-31 11:15:21 -0500
• Engine revision c2bcffb07e
• Dart version 2.17.0 (build 2.17.0-67.0.dev)
• DevTools version 2.10.0-dev.1
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/maxdeboer/Library/Android/sdk
• Platform android-31, build-tools 31.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
[✓] IntelliJ IDEA Community Edition (version 2020.1.2)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
[✓] Connected device (3 available)
• iPhone von Max (mobile) • 00008020-000249E82E50003A • ios • iOS 15.2.1 19C63
• macOS (desktop) • macos • darwin-x64 • macOS 12.1 21C52 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.99
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!