3

I've used PageView.Builder() to build widgets fed from an array of basic text Widgets. But in debug mode the animation feels very laggy. In release or profiling mode the animation is still laggy but lot less. Is there any way to completely smooth out the animation lagginess when PageView is used.

Here's my code,

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: pageView(),
    );
  }
}

class pageView extends StatelessWidget {
  var color = [
    Colors.white,
    Colors.lightBlue,
    Colors.lightGreen,
    Colors.limeAccent
  ];
  PageController controller = PageController();
  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: 5,
      controller: PageController(initialPage: 1),
      itemBuilder: (BuildContext context, int itemIndex) {
        return pageProvider(color[itemIndex]);
      },
    );
  }
}

class pageProvider extends StatelessWidget {
  Color color;
  pageProvider(this.color);
  Text fillText() {
    var str = "";
    for (int i = 0; i < 1000; i++) {
      str += (" " + 'allan $i');
      if (i % 10 == 0) {
        str += '\n';
      }
    }
    return Text(str);
  }

  Widget build(BuildContext context) {
    return Container(color: color, child: fillText());
  }
}

Here's the link of my profiling graph. I've done this profiling on a android mobile with 6 gb ram and snapdragon 636 with some Nice gpu. Link: https://drive.google.com/file/d/1khbhKQttVXbdHf0_z1b1iPA11BDOcmdW/view?usp=sharing

Allan
  • 110
  • 9
  • i think you may have problem with `pageProvider`, can you add full widget that will help to reproduce errors. – Md. Yeasin Sheikh Aug 19 '21 at 13:16
  • @YeasinSheikh I've added my full code. It's a very simple code actually but it still lags(animation). – Allan Aug 19 '21 at 13:58
  • What does the `pageProvider` method do? – Andrej Aug 19 '21 at 14:36
  • @Andrej It provides a page based on the color and it also generates some text inside the page and returns the page to the pageview builder. I've used this only to test the performance of pageview. But it's too bad even on these simple code. – Allan Aug 19 '21 at 14:38
  • Post the code for `pageProvider` method please. – Andrej Aug 19 '21 at 14:41
  • I used exactly your code and got 57 fps in profile mode, got no lagging – Mohammad Hosein Aug 19 '21 at 14:47
  • @Andrej I've posted it already – Allan Aug 19 '21 at 14:58
  • @MohammadHosein I've got random spikes in ui thread when scrolling between the pages. Actually I used this code for testing only. Even for a small code like this I'm getting spikes in Ui thread. For complex code which I ran this pageView I've got more lags in Ui and Raster thread. Why are these small spikes happenning? Is flutter broke? The animations are not so smooth in my mobile as i've tested in release too. – Allan Aug 19 '21 at 15:00
  • I've just tried your code, on Flutter web and works fine and runs smooth. – Andrej Aug 19 '21 at 15:10
  • @Andrej Here's the link of my profiling graph. I've done this profiling on a android mobile with 6 gb ram and snapdragon 636 with some Nice gpu. Link: https://drive.google.com/file/d/1khbhKQttVXbdHf0_z1b1iPA11BDOcmdW/view?usp=sharing – Allan Aug 19 '21 at 15:24
  • @MohammadHosein I've added my profiling link to the post – Allan Aug 20 '21 at 02:34

1 Answers1

0

Why don't you try warming up skia engine as given here: Shader Compilation Jank because most probably that's the problem most people face.

Quoting from the docs:

If the animations on your mobile app appear to be janky, but only on the first run, this is likely due to shader compilation. Definitive evidence for the presence of shader compilation jank is to see GrGLProgramBuilder::finalize in the tracing with --trace-skia enabled.

To precompile the shader code, run

flutter run --profile --cache-sksl --purge-persistent-cache

Play with the app to trigger as many animations as needed; particularly those with compilation jank.

Press M at the command line of flutter run to write the captured SkSL shaders into a file named something like flutter_01.sksl.json. For best results, capture SkSL shaders on an actual iOS device. A shader captured on a simulator isn’t likely to work correctly on actual hardware.

Build the app with SkSL warm-up using the following, as appropriate:

flutter build ios --bundle-sksl-path flutter_01.sksl.json

Just a Person
  • 1,276
  • 1
  • 5
  • 23