Search code examples
iosiphoneflutterscroll

Flutter scroll has jittering on iOS 15.4 with promotion '120hz'


Flutter app scroll has jittering on iOS 15.4 at starts but after resume from the background will be smooth.

This issue is just on iPhone 13 pro and 13 pro max I remove everything about heavy components and big images and create a new empty project just for testing and still have the same result.

And flutter version is Stable Chanel 2.10.3

Tested on iPhone 13 pro max with promotion 120hz

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: HomeScreen(), //MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomeScreen extends StatelessWidget{
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold( appBar: AppBar(),
      body: Scrollbar(
        child: ListView.builder(
          addAutomaticKeepAlives: true,
          primary: false,
          shrinkWrap: false,
          physics:  const AlwaysScrollableScrollPhysics(),
          itemCount: 300,
            itemBuilder: (contx, index){
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container( child: Image.asset('assets/ic_test_image.png', fit: BoxFit.cover),),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('test scroll, dummy data',
                      style: TextStyle(color: Colors.orange, fontSize: 30),),
                  ),
                  Container(height: 0.9, color: Colors.blue,)
                ],
              );
            }, ),
      ),);
  }

}

And in info.plist file, I added this to enable 120hz

<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>

Solution

  • This has been fixed in Flutter 3.x. From the What's new in Flutter 3:

    iOS variable refresh rate support

    Flutter now supports variable refresh rate on iOS devices with ProMotion displays, including iPhone 13 Pro and iPad Pro. On these devices, Flutter apps can render at refresh rates reaching 120 hz, which were previously limited to 60 hz. This results in a smoother experience during fast animations such as scrolling. See flutter.dev/go/variable-refresh-rate for more details.