UIKit vs SwiftUI vs Flutter animation frame rate

README.md

UIKit vs SwiftUI vs Flutter animation frame rate, based on https://twitter.com/ChristianSelig/status/1574207311140327426

1. flutter create test_framerate && cd test_framerate
2. Replace lib/main.dart and AppDelegate.swift.
3. Set target build setting iOS Deployment Target (IPHONEOS_DEPLOYMENT_TARGET) to 15.0.
4. flutter run on ProMotion display.

Note CADisableMinimumFrameDurationOnPhone is already set to true in the Info.plist.

AppDelegate.swift

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import UIKit
import SwiftUI
import Flutter
import SpriteKit

@main
struct TestFrameRateApp: App {
  var body: some Scene {
    WindowGroup {
      ViewControllerWrapper()
        .background(Color.black)
    }
  }
}

struct ViewControllerWrapper: UIViewControllerRepresentable {
  func makeUIViewController(context: UIViewControllerRepresentableContext<ViewControllerWrapper>) -> FrameRateViewController {
    return FrameRateViewController()
  }

  func updateUIViewController(_ uiViewController: FrameRateViewController, context: UIViewControllerRepresentableContext<ViewControllerWrapper>) {
  }
}

class FrameRateViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let centerX = view.bounds.width / 2.0

    // Modified from https://gist.github.com/christianselig/c14e7801b21c0215329060f2734e81fb
    // by christianselig

    // UIKit box.
    let box = UIView()
    box.frame = CGRect(x: centerX - 150.0, y: 0.0, width: 100.0, height: 100.0)
    box.backgroundColor = .systemGreen
    view.addSubview(box)

    // Delay for Flutter view, don't bother prewarming engine.
    UIView.animate(withDuration: 0.5, delay: 0.39, options: [.curveLinear, .repeat, .autoreverse]) {
      box.frame.origin.y = 600.0
    }

    // SwiftUI box.
    let hostingController = UIHostingController(rootView: ContentView())
    view.addSubview(hostingController.view)
    hostingController.didMove(toParent: self)
    hostingController.view.frame = CGRect(x: centerX - 50.0, y: 0.0, width: view.bounds.width / 3.0, height: view.bounds.height)

    // Flutter box.
    let flutterViewController = FlutterViewController.init()
    addChild(flutterViewController)
    view.addSubview(flutterViewController.view)
    flutterViewController.view.frame = CGRect(x: centerX + 50.0, y: 0.0, width: view.bounds.width / 3.0, height: view.bounds.height)

    let skView = SKView()
    skView.frame = CGRect(x: centerX, y: 10, width: 70, height: 20)
    skView.showsFPS = true
    skView.preferredFramesPerSecond = UIScreen.main.maximumFramesPerSecond
    view.addSubview(skView)
  }
}

struct ContentView: View {
  @State var offsetY = 0.0

  var body: some View {
    ZStack(alignment: .topLeading) {
      Color.black

      Rectangle()
        .foregroundColor(.red)
        .frame(width: 100.0, height: 100.0)
        .offset(y: offsetY)
        .onAppear {
          // Delay for Flutter view.
          let animation = Animation.linear(duration: 0.5).repeatForever().delay(0.3)

          withAnimation(animation) {
            offsetY = 600.0
          }
        }
    }
    .ignoresSafeArea()
  }
}

main.dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Scaffold(body: MyStatefulWidget()),
      theme: ThemeData(scaffoldBackgroundColor: Colors.black),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  )..repeat(reverse: true);


  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const double size = 100;
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0, (MediaQuery.of(context).size.height - size) * _controller.value),
          child: Container(
            width: size,
            height: size,
            color: Colors.blue,
            child: const FlutterLogo(size: size),
          ),
        );
      },
    );
  }
}