Flutter Gridview with CacheImage causing crash

Question

I am trying to build a shopping app for which I want to show the list of products in a grid view. The code that I have used -

Expanded(
    child: GridView.builder(
      cacheExtent: 999999,
      itemCount: itemData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 1 / 1.5,
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.white,
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ItemView(itemData, index)),
              );
            },
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                Expanded(
                    child: CachedNetworkImage(
                  imageUrl: itemData[index][5],
                  placeholder: (context, url) => Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Image.asset("assets/images/background.png"),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                )),
                SizedBox(
                  height: 7,
                ),
                Text(itemData[index][0],
                    style:
                        TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
                SizedBox(height: 3),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [Text("Wgt  :  "), Text("Crt    :  ")]),
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(itemData[index][2] + "g"),
                          Text(itemData[index][1]),
                        ])
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
                itemData[index][3] == "0"
                    ? Text(
                        "Out of Stock",
                        style: TextStyle(color: Colors.red),
                      )
                    : Container(),
                SizedBox(
                  height: 5,
                ),
              ],
            ),
          ),
        );
      },
    ),
  )

each image size ranges from 200-300kb and itemData length can vary from 50-100 items.

When I am trying to scroll at first it lags and then app closes automatically.

debugging details-

[        ] Reloaded 1 of 1140 libraries in 2,425ms.
[+29946 ms] W/InputEventReceiver(22092): Slow Input: took 293ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=471, seq=1167481,
action=ACTION_DOWN)
[+5360 ms] W/InputEventReceiver(22092): Slow Input: took 826ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=589, seq=1167805,
action=ACTION_DOWN)
[        ] W/InputEventReceiver(22092): Slow Input: 927ms so far, now at dispatchInputEvent (MotionEvent: event_seq=590, seq=1167827, action=ACTION_MOVE)
[        ] W/InputEventReceiver(22092): Slow Input: 918ms so far, now at dispatchInputEvent (MotionEvent: event_seq=591, seq=1167829, action=ACTION_UP)
[  +49 ms] W/InputEventReceiver(22092): Slow Input: 553ms so far, now at dispatchInputEvent (MotionEvent: event_seq=592, seq=1167832, action=ACTION_DOWN)
[        ] W/InputEventReceiver(22092): Slow Input: 462ms so far, now at dispatchInputEvent (MotionEvent: event_seq=593, seq=1167850, action=ACTION_MOVE)
[        ] W/InputEventReceiver(22092): Slow Input: 453ms so far, now at dispatchInputEvent (MotionEvent: event_seq=594, seq=1167852, action=ACTION_UP)
[+6824 ms] W/InputEventReceiver(22092): Slow Input: took 194ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=659, seq=1168024,
action=ACTION_DOWN)
[+2668 ms] W/InputEventReceiver(22092): Slow Input: took 322ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=662, seq=1168057,
action=ACTION_DOWN)
[ +973 ms] W/InputEventReceiver(22092): Slow Input: took 191ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=677, seq=1168143,
action=ACTION_DOWN)
[ +334 ms] W/InputEventReceiver(22092): Slow Input: took 104ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=680, seq=1168180,
action=ACTION_DOWN)
[+2081 ms] Service protocol connection closed.
[        ] Lost connection to device.
[   +1 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[   +4 ms] Exit code 0 from: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[        ] 4b7746b70305 tcp:39351 tcp:45893
           4b7746b70305 tcp:37419 tcp:38492
           4b7746b70305 tcp:33427 tcp:42728
[   +1 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --remove tcp:39351
[   +6 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --remove tcp:37419
[   +5 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --remove tcp:33427
[   +7 ms] DevFS: Deleting filesystem on the device (file:///data/user/0/com.vriksh.ganpatijewellers/code_cache/ganpatijewellersGZZHJA/ganpatijewellers/)
[ +252 ms] Ignored error while cleaning up DevFS: TimeoutException after 0:00:00.250000: Future not completed
[  +10 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[   +8 ms] Exit code 0 from: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[   +2 ms] "flutter run" took 227,027ms.
[ +256 ms] ensureAnalyticsSent: 252ms
[   +2 ms] Running shutdown hooks
[        ] Shutdown hooks complete
[        ] exiting with code 0

Note - For debug i use physical device Redmi 6pro. I have also tested it in release mode and I am facing same issue with that.

@OMiShah when i try to scroll the list it gives `Slow Input: took 120ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=195, seq=731521, action=ACTION_DOWN)` lags a lot and then crash — Malay Agrawal, Aug 01 '21 at 12:11
@MalayAgrawal Can you add more detail on the run environment and version used? https://github.com/flutter/flutter/issues/28984 — Dinesh Nagarajan, Aug 01 '21 at 12:20
@DineshNagarajan I have tried running it on different android devices its crashing on devices with 4GB RAM or low but working fine on devices with 16GB RAM(but still we can see lag) `minSdkVersion 16 targetSdkVersion 30` — Malay Agrawal, Aug 01 '21 at 12:26
@Alex.F I have edited the question and added debugging details. — Malay Agrawal, Aug 02 '21 at 10:59

score 1 · Answer 1 · answered Aug 07 '21 at 07:59

After multiple hit and try adding memCacheHeight: 400 to CachedNetworkImage solved this issue i read about it and came out that this Will resize the image in memory to have a certain height which reduces a huge amount of work done by the app and makes it smooth without the crash.

Full code-

Expanded(
    child: GridView.builder(
      cacheExtent: 999999,
      itemCount: itemData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 1 / 1.5,
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.white,
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ItemView(itemData, index)),
              );
            },
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                Expanded(
                    child: CachedNetworkImage(
                  imageUrl: itemData[index][5],
                  memCacheHeight: 400,     //this line
                  placeholder: (context, url) => Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Image.asset("assets/images/background.png"),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                )),
                SizedBox(
                  height: 7,
                ),
                Text(itemData[index][0],
                    style:
                        TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
                SizedBox(height: 3),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [Text("Wgt  :  "), Text("Crt    :  ")]),
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(itemData[index][2] + "g"),
                          Text(itemData[index][1]),
                        ])
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
                itemData[index][3] == "0"
                    ? Text(
                        "Out of Stock",
                        style: TextStyle(color: Colors.red),
                      )
                    : Container(),
                SizedBox(
                  height: 5,
                ),
              ],
            ),
          ),
        );
      },
    ),
  )

you have no idea How mush you saved me , truly thanks bro !! — Mohammed Hamdan, Oct 09 '22 at 01:06

Flutter Gridview with CacheImage causing crash

1 Answers1